Question

我想在react native中使用react导航4.x创建一个抽屉导航器，但不希望在屏幕左侧获得抽屉菜单。这是我的导航组件代码。它包含三个屏幕，我要在抽屉菜单中显示“首页”，“首页”和“登录”。

import {
  createSwitchNavigator,
  createAppContainer,
  //createDrawerNavigator,
  // createBottomTabNavigator,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';

import FirstScreen from '../screen/FirstScreen';
import HomeScreen from '../screen/HomeScreen';
import LoginScreen from '../screen/LoginScreen';

const AppStack = createStackNavigator ({
  First: {screen: FirstScreen},
  // Dashboard: {screen: AppDrawerNavigator},
  Login: {screen: LoginScreen},
  Home: {screen: HomeScreen},
})
const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {screen:AppStack}
});

const switchNavigator = createSwitchNavigator({
  First: {screen: FirstScreen},
  Dashboard: {screen: AppDrawerNavigator},
  Login: {screen: LoginScreen},
  Home: {screen: HomeScreen},
});

const AppNavigator = createAppContainer(switchNavigator);

export default AppNavigator;

Answer 1

如果要将AppStack保留为stackNavigator，则必须创建自定义抽屉式导航器并将其传递到createDrawerNavigator。

因此，首先如下创建 CustomDrawer.js ：

import React, { Component } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { NavigationActions } from 'react-navigation';

class CustomDrawer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menus: [
        key: 'First', title: 'First', screen: 'FirstScreen',
        key: 'Login', title: 'Login', screen: 'LoginScreen',
        key: 'Home', title: 'Home', screen: 'HomeScreen'
      ]
    };
  }

  navigateToScreen = (route) => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
    this.props.navigation.closeDrawer();
  }

  render() {
    return (
      <ScrollView style={{flex: 1}}>
        {
          this.state.menus.map((menu) => (
            <TouchableOpacity key={menu.key} onPress={() => this.navigateToScreen(menu.screen)}>
              <Text>{menu.title}</Text>
            </TouchableOpacity>
          ))
        }
      </ScrollView>
    );
  }
}

export default CustomDrawer;

然后在您的 AppNavigator.js 中，将CustomDrawer作为contentComponent在createDrawerNavigator中传递，如下所示：

const DrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: AppStack,
  }
}, {
  contentComponent: CustomDrawer, // Pass here
  // others props
  drawerBackgroundColor: 'rgba(255,255,255,.9)',
  overlayColor: 'rgba(0,0,0,0.5)',
  contentOptions: {
    activeTintColor: '#fff',
    activeBackgroundColor: '#6b52ae',
  },
});

如果您想要更多样式，可以在 CustomDrawer.js 中完成。

Answer 2

您将要返回开关导航器，请尝试这种方式，将switch-navigator对象与抽屉导航器对象一起嵌入，然后返回抽屉导航器对象。请参阅下面

const AppDrawerNavigator = createDrawerNavigator({
  First: {screen: FirstScreen},
  Login: {screen: LoginScreen},
  Home: {screen: HomeScreen},
  switchNavigator: switchNavigator
});
const AppNavigator = createAppContainer(AppDrawerNavigator);
export default AppNavigator;

使用react-navigation 4.x在react-native中的抽屉导航器

2 个答案: