嵌套的 Drawer-StackNavigator，触发“DrawerOpen”在 React-Native 上不起作用答案

【问题标题】：Nested Drawer-StackNavigator, firing "DrawerOpen" is not working on React-Native嵌套的 Drawer-StackNavigator，触发“DrawerOpen”在 React-Native 上不起作用
【发布时间】：2017-12-13 14:00:11
【问题描述】：

我正在使用带有 react-navigation 的 React Native 制作应用程序。

[我的应用的层次结构]

*抽屉（应用）

ㄴ StackNavigator

我要的是火navigation.navigate('DrawerOpen');

我可以通过从左边缘拖动来显示我的抽屉，但它不会通过按导航标题左侧的“菜单按钮”来触发。我花了很多时间来存档这个。请帮帮我。

const Nav = StackNavigator({
    mainnav_list:{
        screen: (props) => <TodoList {...props} dbCollectionName={props.screenProps.dbCollectionName}/>,
        navigationOptions:({navigation}) => ({
            headerLeft:(
                <TouchableOpacity onPress={() => {console.log(navigation); navigation.navigate('DrawerOpen');}}>
                    <Text style={{color:'white', marginLeft:15}}>Menu</Text>
                </TouchableOpacity>
            )
        })
    },
    mainnav_detail:{screen: TodoDetail}
}
,
{
    navigationOptions:(props) => ({
        title:props.screenProps.dbCollectionName,
        headerBackTitle:null,
        headerStyle:{backgroundColor:'#000'},
        headerTitleStyle:{color:'#fff'},
        headerTintColor:'#fff',
    })
})

const AppDrawer = DrawerNavigator(
{
    drawer1:{screen:() => <Nav screenProps={{dbCollectionName:'todos'}}/> },
    drawer2:{screen:() => <Nav screenProps={{dbCollectionName:'todos2'}}/> }
})

AppRegistry.registerComponent('TodosFS', () => AppDrawer);

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

在新版本的 reactnavigation 中打开、关闭或切换您的 DrawerNavigator 只需使用以下内容

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
this.props.navigation.toggleDrawer();

https://reactnavigation.org/docs/en/drawer-based-navigation.html

【讨论】：

那我如何在使用openDrawer时传递参数？
这应该被标记为接受的答案。谢谢！！

【解决方案2】：

我解决了！！

const Nav = StackNavigator({
    mainnav_list:{
        screen: (props) => <TodoList {...props} dbCollectionName={props.screenProps.dbCollectionName}/>,
        navigationOptions:(props) => ({
            headerLeft:(
                <TouchableOpacity onPress={() => {props.screenProps.drawerNavigation.navigate('DrawerOpen');}}>
                    <Text style={{color:'white', marginLeft:15, fontWeight:'bold'}}>Menu</Text>
                </TouchableOpacity>
            )
        })
    },
    mainnav_detail:{screen: TodoDetail}
}
,
{
    navigationOptions:(props) => ({
        title:props.screenProps.dbCollectionName,
        headerBackTitle:null,
        headerStyle:{backgroundColor:'#000'},
        headerTitleStyle:{color:'#fff'},
        headerTintColor:'#fff',
    })
})

const AppDrawer = DrawerNavigator(
{
    drawer1:{screen:({navigation}) => <Nav screenProps={{dbCollectionName:'todos', drawerNavigation:navigation}}/> },
    drawer2:{screen:({navigation}) => <Nav screenProps={{dbCollectionName:'todos2', drawerNavigation:navigation}}/> }
})

AppRegistry.registerComponent('TodosFS', () => AppDrawer);

【讨论】：