react-native – React – 本机导航抽屉导航嵌套导航

发布时间：2020-12-15 09:36:25 所属栏目：百科来源：网络整理

导读：目前在我正在构建的react-native应用程序中,我有一个包含两个屏幕的Drawer Navigator. 对于导航,我正在使用react-navigation. https://reactnavigation.org/docs/intro/ 代码如下, import { DrawerNavigator } from 'react-navigation'export default drawer

目前在我正在构建的react-native应用程序中,我有一个包含两个屏幕的Drawer Navigator.
对于导航,我正在使用react-navigation.
https://reactnavigation.org/docs/intro/

代码如下,

import { DrawerNavigator } from 'react-navigation'
export  default drawernav = DrawerNavigator(
     {
        Login: {Screen: Login},Main : {Screen: Main }
     }
)

虽然Login在抽屉导航器中,但我想要它,以便登录屏幕没有抽屉导航功能,但主屏幕使用login和main作为抽屉导航器中的两个选项.
但是,现在登录屏幕也有抽屉导航器.有没有办法让登录抽屉导航功能消失？

解决方法

请参考以下帖子,这是非常有帮助的.
https://github.com/react-navigation/react-navigation/issues/131.
建议采用多种方法.
kyaroru提供了一个完整的工作示例如下：
https://github.com/kyaroru/ReactNavDrawer.

以下是一个更简单的示例：

app.js

import React from 'react';
import { createStackNavigator,createDrawerNavigator } from 'react-navigation';
import LoginScreen from './LoginScreen';
import SignupScreen from './SignupScreen';
import HomeScreen from './HomeScreen';
import DrawerButton from './DrawerButton';
import SettingScreen from './SettingScreen';

const StackNavigator = createStackNavigator ({

  Login: {
    screen: LoginScreen,},Signup: {
    screen: SignupScreen,Home: {
    screen: HomeScreen,Sitting: {
    screen: SettingScreen,{
      navigationOptions: ({navigation}) => ({
        headerLeft: <DrawerButton navigation={navigation} />,}),}
);

const DrawerNavigator = createDrawerNavigator({
  Menu: {
     screen: StackNavigator,});

export default DrawerNavigator;

DrawerButton.js

import React from 'react';
import { TouchableOpacity,Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';


const DrawerButton = ({ navigation }) => (
  <TouchableOpacity
    onPress={() => navigation.openDrawer()}
  >
    <Ionicons name={Platform.OS === 'ios' ? 'ios-menu' : 'md-menu'} size={28}  />
  </TouchableOpacity>
);


DrawerButton.propTypes = {
  navigation: PropTypes.object.isRequired,};

export default DrawerButton;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!