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

Question

我已经使用react-native-drawer. 抽屉视图包含ListView. 每当单击该renderRow方法时，都需要在抽屉本身而不是Welcome屏幕堆栈顶部显示导航。

现在：在此处查看屏幕截图

预期： 想要实现这样的目标 - 多级菜单

文件：组件/welcome.js

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

文件：组件/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

从这里的文档

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

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组件，<home />然后在onPressaddactions.home() 和 home 是 react-native-router-flux 场景组件的关键