0

我已经使用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它在屏幕顶部导航。我需要在抽屉本身上导航。我怎么能做到这一点？

4

1 回答 1

0

从这里的文档

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

  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 场景组件的关键

于 2017-09-01T22:51:48.913 回答