嵌套 Drawer-StackNavigator，触发“DrawerOpen"不适用于 React-Native [英] Nested Drawer-StackNavigator, firing "DrawerOpen" is not working on React-Native

问题描述

我正在使用 React Native 和 react-navigation 来制作应用.

I'm making app with using React Native with react-navigation.

[我的应用的层次结构]

[My App's hierarchy]

*抽屉(应用)

ㄴ StackNavigator

ㄴ StackNavigator

ㄴ StackNavigator

ㄴ StackNavigator

我想要的是触发 navigation.navigate('DrawerOpen');

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

I can show my Drawer by dragging from left edge but it's not triggered by pressing "Menu button" on the left of Navigation header. I've spent so many times to archive this. Please help me.

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);

推荐答案

我解决了！！

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);

这篇关于嵌套 Drawer-StackNavigator，触发“DrawerOpen"不适用于 React-Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！