Question

我正在使用 react-native-drawer 在我的 React Native 应用程序中显示导航抽屉。我正在使用两条路线。第一个是登录前，第二个是登录后，这是一个抽屉。我面临的问题是，如果我将屏幕添加到抽屉导航中，那么它也会显示在抽屉中，但如果我使用 stacknavigator，则无法在该屏幕上访问抽屉。

这是我的 app.js 中两个导航的代码：

const MyDrawerNavigator = createDrawerNavigator({
        Dashboard: {
            screen: HomeScreen,
            params:{servUrl: url},
        },
       Profile: {
            screen: Profile
            params:{servUrl: url},
        },

    },
    {
        drawerPosition: 'right',
        initialRouteName: 'Dashboard',
        drawerBackgroundColor: 'white',
        drawerWidth: 270,
        drawerType:'above',
        contentComponent: DrawerContentComponent,
        contentOptions: {
            activeTintColor: '#259BCC',
            inactiveTintColor: '#939393',

        }

    });

const Stack = createStackNavigator(
    {
      Login: { screen: LoginScreen ,
        navigationBarStyle : {navBarHidden: true },
        navigationOptions: {
          headerShown: false,
        },
        params:{servUrl: url}
      },

        SignUp:{
          screen:SignUpScreen,
            navigationBarStyle : {navBarHidden: true },
            navigationOptions: {
                headerShown: false,
            },
            params:{servUrl: url}
        },
      

       AfterLogin:{
          screen:MyDrawerNavigator,
           params:{servUrl: url},
           navigationBarStyle : {navBarHidden: true },
           navigationOptions: {
               headerShown: false,
           },
       },
       
        CallScreen:{
          screen:CallScreen,
            params:{servUrl:url},
            navigationBarStyle : {navBarHidden: true },
            navigationOptions: {
                headerShown: false,
            },
        },
       
    }
);



const DrawerContentComponent = (props) => (

    <Container >

        <Header style={styles.drawerHeader}>
            <Body>
                <View style={{ flexDirection: 'row'} }>
                    <Image
                        style={styles.drawerImage}
                        source={require('./assets/logoWithoutText.png')} />
                    <Text style={{marginLeft:20,alignContent:'center',fontSize:20,fontWeight:'bold',alignSelf:'center'}}>Test App</Text>
                </View>
            </Body>
        </Header>
        <Content >

            <DrawerItems  {...props} />
        </Content>

    </Container>

);

所以现在我有一些屏幕不想显示在抽屉中，但我希望抽屉仍然可以在那里访问

Answer 1

我建议您使用 react-navigation v5。它很容易使用。您可以查看此链接 https://reactnavigation.org/docs/nesting-navigators

您应该在登录屏幕上使用 Stack navigator，在另一个屏幕上使用 Drawee navigator。我没有尝试过下面的代码，但它应该可以工作。您可以通过调用 navigation.navigate('Root',{screen:'Home'})

访问 Drawer

function Root() {
  return (
    <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Profile" component={Profile} />
    </Drawer.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={YourLoginScreen} />
        <Stack.Screen name="Root" component={Root} />
      <Stack.Navigator>
    </NavigationContainer>
  );
}

从 React Native Drawer 隐藏屏幕标签

1 个答案: