react native 基于react navigation 4.x 实现tabBar

1. 核心包安装

yarn add react-navigation

2. 核心包的三个依赖项

yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

3. 此时，一定要先运行一下项目，之后再安装 react-navigation-tabs ，

yarn add react-navigation-tabs

如果你不运行项目，一口气将 react-navigation-tabs也安装后，再运行，就会报”gridle 6.0 不兼容错误，同时app安装失败“

4. 所需要的包已经安装好了，那就上代码

import React from 'react';
import { Text, View ,Image} from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import Ionicons from 'react-native-vector-icons';

// 下面是 4个组件
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

class Xinjia extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>新加坡</Text>
      </View>
    );
  }
}

class Malai extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>马来西亚</Text>
      </View>
    );
  }
}
               
const TabNavigator = createBottomTabNavigator(
  {
    Home:{
      screen: HomeScreen,
      navigationOptions:({navigation})=>({       
          tabBarLabel:"中国",
          tabBarIcon:({focused,horizontal,tintColor})=>{
            let image = focused ? require('./xiong.jpg') : require('./mao.jpg');
              return <Image style={{height:40, width:40}} source={image} />
          }     
      })
      
    },
    Setting:{
      screen: SettingsScreen,
      navigationOptions:{
        tabBarLabel:"日本",
        // 配置Icon图标有两种方式，（1）使用图片，我觉得简单（2）使用图标库
        tabBarIcon:({focused,horizontal,tintColor})=>{ 
          let image = focused ? require('./xiong.jpg') : require('./mao.jpg');
            return <Image style={{height:40, width:40}} source={image} />
        }   
      }
    },
    Xin:{
      screen: Xinjia,
      navigationOptions:{
        tabBarLabel:"新加",
       //  tabBarVisible: false 隐藏标签栏，就是隐藏tabBar
      }
    },
    Malai:{
      screen: Malai,
      navigationOptions:{
        tabBarLabel:"马来"
      }
    }
  },
  {
    tabBarOptions: {
      showIcon: true,            // 是否显示选项卡的图标 
      activeTintColor: 'tomato', // 选中时状态颜色
      inactiveTintColor: 'gray', // 未选中状态颜色
      labelStyle: {              // 选项卡标签的样式对象
        fontSize: 12,            
      },
      style: {                   // 选项卡栏的样式对象
        backgroundColor: 'blue', 
      },
    }
  }
);

export default createAppContainer(TabNavigator);

我解释一下：
（1）上面的写法和参考资料

https://reactnavigation.org/docs/zh-Hans/tab-based-navigation.html （这是react-navigation官网）

https://reactnavigation.org/docs/zh-Hans/bottom-tab-navigator.html （这个是react-naviagtion 的API部分）
（2）tabBar配置图标时 ， 官网案例跟我的需求不一样，查了一下react-navigation官网API，被我找到了，但是我就是没理解那句话的意思。

navigationOptions:{
        tabBarLabel:"日本",
        tabBarIcon:({focused,horizontal,tintColor})=>{ 
          let image = focused ? require('./xiong.jpg') : require('./mao.jpg');
            return <Image style={{height:40, width:40}} source={image} />
        }   
      }

实现tabBar图标有两种方式

（1）使用，react-native-vector-icons 图标库  --- 暂时我没有使用过
（2）使用，图片 --- 我用的就是这种方法

我再解释一下上面，focused 这个变量是 boolean 值，为 true处于”选中状态“ ，为false处于”未选中状态“

 

5. 为了证明，我实现了，贴一张图，有用的话帮忙点个赞 ，谢谢