Question

我想关闭screen: ExportClues上的抽屉，但它不起作用。

这是我的代码。

const Drawer = DrawerNavigator( {
  Navigators: {
            screen: Navigators
         },
     {
           initialRouteName: 'Navigators',
           drawerWidth: Metrics.screenWidth - 95,
           drawerPosition: 'right',
           contentComponent:  MenuNavigator 
      }
})


const Navigators = StackNavigator({
     ...screen
})

const MenuNavigator = StackNavigator({
       ExportClues: {
                 screen: ExportClues,
        },
       ...other screen
})

是ExportClues组件：

export default class index extends Component {

                   render() {
                        return(
                               <View
                                        style={{flex: 1, backgroundColor: '#ffffff'}}
                                 >
                                      <TouchableOpacity
                                          onPress={()=>{
                                             this.props.navigation.navigate('DrawerClose');
                                              // It is not work
                                             }}
                                         >
                                      <TouchableOpacity/>
                                </View>
                         )
                     }
 }

抱歉，我的英语很差。

如何将MenuNavigator Parent Navigator设为DrawerNavigator？

Answer 1

查看您提供的链接，您试图错误地包含抽屉组件：你写从'./drawer'导入抽屉并尝试使用组件但您的drawer.js文件正在导出“CustomerManagerDrawerNavigator”

export default CustomerManagerDrawerNavigator;

这意味着你的代码应该是从'./drawer'导入CustomerManagerDrawerNagivator 你的组件应该被称为在render（）函数中。

如果您想使用DrawerNavigator，则需要更改

const MenuNavigator = StackNavigator({

到

const MenuNavigator = DrawerNavigator({

在ExportClues中关闭抽屉，您可以调用

this.props.navigation.navigate('DrawerClose'); // close drawer

我看到你有，但你没有在导航器配置中传递任何navigationOptions，因此你无权访问导航功能。你需要类似下面的代码：

navigationOptions: ({navigation}) => ({
 .../*Your navigation options here */
}),

将导航作为道具传递给您打开的抽屉

我会查看位于https://reactnavigation.org/docs/navigators/drawer的DrawerNavigator的React-Navigation主页以获取更多详细信息，或者如果可能的话，发布指向工作存储库的链接

react navigation如何关闭DrawerNavigator嵌套的StackNavigator？

1 个答案: