版本环境：react-native：0.60.5 react-navigation：4.0
实现需要的第三方库如下：
image.png
通过命令行进行安装第三方库并连接
npm install react-navigation --save
npm install react-navigation-tabs --save
npm install react-navigation-stack --save
npm install react-native-gesture-handler --save
react-native link react-native-gesture-handler
npm install react-native-reanimated --save
以及使用react-native的图标库，（网址：https://oblador.github.io/react-native-vector-icons/
），需要进行命令行安装连接
npm install react-native-vector-icons --save需要
react-native link react-native-vector-icons
代码实现：
1.需要4个不同的导航页面，页面1代码如下，其他类似，也可自己编写
import React, {Component} from 'react';
import {View, Text} from 'react-native';
export default class Page1 extends Component {
render() {
return (
<View>
<Text>This is Page1</Text>
</View>
);
}
}
2路由导航页面编写，导入相应的第三方库
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
将导航的几个页面导入进来
import Page1 from './js/page/Page1';
import Page2 from './js/page/Page2';
import Page3 from './js/page/Page3';
import Page4 from './js/page/Page4';
3.底部导航编写，代码如下
export const BottomTab = createAppContainer(
createBottomTabNavigator(
{
/*Page1路由*/
Page1: {
/*Page1页面*/
screen: Page1,
/*屏幕导航选项,可以定制导航器显示屏幕的方式（头部标题，选项卡标签等）*/
navigationOptions: {
/*导航标签名*/
tabBarLabel: '页1',
/*导航呈现的图标*/
tabBarIcon: ({tintColor, focused}) => (
/*第三方图标库（图标名称，图标大小，图标样式*/
<MaterialIcons name={'home'} size={26} style={{color: tintColor}} />
),
},
},
Page2: {
screen: Page2,
navigationOptions: {
tabBarLabel: '页2',
tabBarIcon: ({tintColor, focused}) => (
<MaterialIcons
name={'location-on'}
size={26}
style={{color: tintColor}}
/>
),
},
},
Page3: {
screen: Page3,
navigationOptions: {
tabBarLabel: '页3',
tabBarIcon: ({tintColor, focused}) => (
<MaterialIcons
name={'assignment'}
size={26}
style={{color: tintColor}}
/>
),
},
},
Page4: {
screen: Page4,
navigationOptions: {
tabBarLabel: '页4',
tabBarIcon: ({tintColor, focused}) => (
<MaterialIcons
name={'perm-identity'}
size={26}
style={{color: tintColor}}
/>
),
},
},
},
{
tabBarOptions: {
/*设置活动选项卡标签的颜色*/
activeTintColor: Platform.OS === 'ios' ? '#06C1AE' : '#06C1AE',
},
},
),
);
4.将底部导航栏放进createStackNavigator
const AppRouter = createStackNavigator({
Home: {
screen: BottomTab,
navigationOptions: {
header: null, //可以通过将header设为null来禁用StackNavigator的Navigation
},
},
});
5.将编写好的AppRouter放入createSwitchNavigator后，再用createAppContainer容器包裹并导出
export const AppCreateNavigator = createAppContainer(
createSwitchNavigator(
{
AppRouter: AppRouter,
},
{
initialRouteName: 'AppRouter',
},
),
);
路由页面的完整代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import React, {Component} from 'react';
import {Platform} from 'react-native';
console.disableYellowBox = true; // 关闭全部黄色警告
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Page1 from './js/page/Page1';
import Page2 from './js/page/Page2';
import Page3 from './js/page/Page3';
import Page4 from './js/page/Page4';
export const BottomTab = createAppContainer(
createBottomTabNavigator(
{
/*Page1路由*/
Page1: {
/*Page1页面*/
screen: Page1,
/*屏幕导航选项,可以定制导航器显示屏幕的方式（头部标题，选项卡标签等）*/
navigationOptions: {
/*导航标签名*/
tabBarLabel: '页1',
/*导航呈现的图标*/
tabBarIcon: ({tintColor, focused}) => (
/*第三方图标库（图标名称，图标大小，图标样式*/
<MaterialIcons name={'home'} size={26} style={{color: tintColor}} />
),
},
},
Page2: {
screen: Page2,
navigationOptions: {
tabBarLabel: '页2',
tabBarIcon: ({tintColor, focused}) => (
<MaterialIcons
name={'location-on'}
size={26}
style={{color: tintColor}}
/>
),
},
},
Page3: {
screen: Page3,
navigationOptions: {
tabBarLabel: '页3',
tabBarIcon: ({tintColor, focused}) => (
<MaterialIcons
name={'assignment'}
size={26}
style={{color: tintColor}}
/>
),
},
},
Page4: {
screen: Page4,
navigationOptions: {
tabBarLabel: '页4',
tabBarIcon: ({tintColor, focused}) => (
<MaterialIcons
name={'perm-identity'}
size={26}
style={{color: tintColor}}
/>
),
},
},
},
{
tabBarOptions: {
/*设置活动选项卡标签的颜色*/
activeTintColor: Platform.OS === 'ios' ? '#06C1AE' : '#06C1AE',
},
},
),
);
const AppRouter = createStackNavigator({
Home: {
screen: BottomTab,
navigationOptions: {
header: null, //可以通过将header设为null来禁用StackNavigator的Navigation
},
},
});
export const AppCreateNavigator = createAppContainer(
createSwitchNavigator(
{
AppRouter: AppRouter,
},
{
initialRouteName: 'AppRouter',
},
),
);
效果图：
image.png
随便写的，希望对你有帮助。
