如何使用react导航添加顶部和底部导航选项卡

npm install react-navigation

import { createMaterialTopTabNavigator } from 'react-navigation';

const TopTabNavigator = createMaterialTopTabNavigator({
  Screen1: {
    screen: Screen1,
    navigationOptions: {
      tabBarLabel: 'Screen 1',
    },
  },
  Screen2: {
    screen: Screen2,
    navigationOptions: {
      tabBarLabel: 'Screen 2',
    },
  },
});

export default TopTabNavigator;

import { createBottomTabNavigator } from 'react-navigation';

const BottomTabNavigator = createBottomTabNavigator({
  Screen1: {
    screen: Screen1,
    navigationOptions: {
      tabBarLabel: 'Screen 1',
    },
  },
  Screen2: {
    screen: Screen2,
    navigationOptions: {
      tabBarLabel: 'Screen 2',
    },
  },
});

export default BottomTabNavigator;

import React from 'react';
import { createAppContainer } from 'react-navigation';
import TopTabNavigator from './TopTabNavigator';
import BottomTabNavigator from './BottomTabNavigator';

const AppNavigator = createAppContainer(TopTabNavigator); // 使用顶部导航选项卡
// const AppNavigator = createAppContainer(BottomTabNavigator); // 使用底部导航选项卡

export default function App() {
  return <AppNavigator />;
}