react-native - 如何将 react-native-router-flux 与 react-native-drawer 结合使用

Question

我试图以某种方式将它们与示例联系起来:
react-native-drawer 与 react-native-router-flux:
遵循本文档:
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md
如何将自定义抽屉放入文件中？
当我尝试这样做时，我总是遇到错误:
文件:
组件/Drawer.js

import Drawer from 'react-native-drawer';
import ControlPanel from './ControlPanel';
import {Actions, DefaultRenderer} from 'react-native-router-flux';

export default class extends Component {
    render(){
        const state = this.props.navigationState;
        const children = state.children;
        return (
            <Drawer
              ref="navigation"
              open={state.open}
              onOpen={()=>Actions.refresh({key:state.key, open: true})}
              onClose={()=>Actions.refresh({key:state.key, open: false})}
              type="displace"
              content={<SideMenu />}
              tapToClose={true}
              openDrawerOffset={0.2}
              panCloseMask={0.2}
              negotiatePan={true}
              tweenHandler={(ratio) => ({
                main: { opacity:Math.max(0.54,1-ratio) }
              })}>
              <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
        );
    }
}

文件:App.js

import Drawer from './components/Drawer'

我收到这个错误。

Answer 1

我没有试过把抽屉放在一个单独的文件中，但这就是我所做的

<Drawer
     type="static"
     content={<Menu closeDrawer={ () => this.drawer.close() }/>}
     openDrawerOffset={100}
     tweenHandler={Drawer.tweenPresets.parallax}
     tapToClose={true}
     ref={ (ref) => this.drawer = ref}
>
     <Router>
          <Scene key="root">
               <Scene key="home" initial={true}/>
          </Scene>
     </Router>
</Drawer>

我没有使用很多配置，所以它没有打扰我将它直接放在我有 Router 的地方。 .