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
- 2.OpenLDAP集成SSH登录并使用SSSD同步用户
- 1.如何在CentOS6.5安装OpenLDAP并配置客户端
- PHP 面试知识梳理
- 如何修改CM及CDH元数据库配置
- 如何实现CDH元数据库MySQL的高可用
- 如何实现CDH元数据库MySQL的主主互备
- 在Kerberos环境使用Hue通过Oozie执行Sqoop作业报错异常分析
- 如何在Hue中配置已启用SSL的HttpFS服务
- 如何使用Nginx实现CDSW的跨网段访问
- 7.如何在OpenLDAP中实现将一个用户添加到多个组
- 如何使用java代码通过JDBC访问Sentry环境下的Hive
- 如何为HttpFS服务配置SSL
- 如何使用Java访问集成OpenLDAP并启用Sentry的Impala和Hive
- 如何向Hive表加载数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何用 Python 写个登陆窗口?
- 3500 字算法刷题精华总结
- web 云开发获取匿名登录返回的uid
- MySQL 最佳实践:慢查询分析三步曲
- 【NLP】利用jieba对网易云音乐的评论进行词云分析
- 【深度学习】一分钟速学 | NMS, IOU 与 SoftMax
- 【机器学习基础】数学推导+纯Python实现机器学习算法26:随机森林
- 【机器学习基础】Python数据预处理:彻底理解标准化和归一化
- Logback配置文件这么写,TPS提高10倍
- 重学数据结构之队列
- 太简单,springboo 使用自定义的 Tomcat
- 没想到,几行代码,你就可以实现图片压缩(springboot)!
- Go 语言学习之基础数据类型
- Go 语言学习之变量
- Go 泛型的括号选择:[ ] or ( )?