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

时间:2019-10-24
本文章向大家介绍react native 基于react navigation 4.x 实现tabBar,主要包括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配置图标时 , 官网案例跟我的需求不一样,所以,我找资料,试出来一种写法,用于配置tabBar的图标。

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. 为了证明,我实现了,贴一张图,有用的话帮忙点个赞 ,谢谢



原文地址:https://www.cnblogs.com/tengyuxin/p/11730352.html