如何结合反应本地路由器通量与反应母语抽屉

Question

我试图以某种方式连接那些例子：

反应母语抽屉与反应本地路由器通量： 本文档以下： 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' 

我得到这个错误。 enter image description here

Answer 1

通过明确界定和出口类名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>); 

    } 
} 

Answer 2

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

<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的地方。