如何使用 react-native-router-flux 在 react-native-drawer 内进行导航

Question

我使用react-native-drawer 创建了抽屉。抽屉视图包含ListView。每当单击renderRow 方法时，都需要在抽屉内部而不是Welcome 屏幕堆栈的顶部显示导航。

现在：Check the Screenshot here

预期： want to achieve something like this - Multi Level Menu

文件： 组件/welcome.js

render(){
  var settingPanel = <Setting closeDrawer={ () => {
    this.drawer.close();
  }} />
  return(
     <Drawer
       ref={c => this.drawer = c}
       type='overlay'
       content={settingPanel}
       ...>
        <Home />
     </Drawer>
  );
}

文件： Component/setting.js

render(){
  return(
    <ListView
     dataSource={this.state.dataSource}
     renderRow={this.renderRow.bind(this)}
    />
  );
}

renderRow (items) {
    return(
        <View>
            <Text style={styles.rowText}>{items.name}</Text>
            <ImageButton onPress={Actions.trans()} img={fb} />
        </View>
    )
};

它在Welcome 屏幕上导航。我需要在抽屉本身上导航。我怎样才能做到这一点？

Answer 1

来自它的文档here

打开抽屉的选项 三个选项：

1. 使用open prop（受控模式）：

   <Drawer
     open={true}
   

2. 使用抽屉参考：

   // assuming ref is set up on the drawer as (ref) => this._drawer = ref
   onPress={() => {this._drawer.open()}}
   

3. 使用上下文

   contextTypes = {drawer: React.PropTypes.object}
   // later...
   this.context.drawer.open()
   

然后使用 react-native-router-flux 导航到另一个组件，您可以添加一个 TouchableOpacity 组件 insted of <home /> 然后在 onPress 添加 actions.home() 而home是react-native-router-flux场景组件的关键