如何将react-native-router-flux与反应原生抽屉结合起来

Question

我试图以某种方式将这些连接到示例:

react-native-drawer with react-native-router-flux:遵循以下文档:https: //github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

如何将自定义抽屉放在文件中？

我总是得到错误,当试图像这样:

文件:components/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.

Answer 2

通过显式定义和导出类名MyDrawer来尝试这种方法:

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

class MyDrawer 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>
        );
    }
}


export default MyDrawer; 

将文件名更改为MyDrawer.js,然后使用以下路线导入:

import MyDrawer from './components/MyDrawer'
import TestView from './components/TestView'



  render() {
       return (
         <Router>
             <Scene key="drawer" component={MyDrawer}>
                  <Scene key="main" tabs={false} >
                     <Scene key="fireBaseTest" component={TestView} drawerImage={navToggle} />
                     //add more scenes here
                  </Scene>
             </Scene> 
         </Router>);

  }
}