React Native学习(五)—— 使用插件react-native-scrollable-tab-view
本文基于React Native 0.52
Demo上传到Git了,有需要可以看看,写了新内容会上传的。Git地址 https://github.com/gingerJY/React-Native-Demo
一、总览
如下图,有一个滑动的tab切换,就是用react-native-scrollable-tab-view来实现的。
二、使用react-native-scrollable-tab-view插件
1、通过npm将插件加入项目
npm install react-native-scrollable-tab-view --save
2、在home.js引入插件
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
3、使用插件
① 这里就写一下我这个效果的实现,其他内容可以看 https://github.com/skv-headless/react-native-scrollable-tab-view
② TabBar有DefaultTabBar
和ScrollableTabBar两种,这里使用ScrollableTabBar,下面是官方给出的例子(如果是在APP的首页会出现内容不显示的问题,三里面有解决办法)
<ScrollableTabView
initialPage={0}
renderTabBar={() => <ScrollableTabBar />}
>
<Text tabLabel='Tab #1'>My</Text>
<Text tabLabel='Tab #2 word word'>favorite</Text>
<Text tabLabel='Tab #3 word word word'>project</Text>
<Text tabLabel='Tab #4 word word word word'>favorite</Text>
<Text tabLabel='Tab #5'>project</Text>
</ScrollableTabView>
③ 修改默认样式
注意改变下划线颜色,要设置backgroundColor
<ScrollableTabView
renderTabBar={() => <ScrollableTabBar />}
tabBarBackgroundColor='#fff'
tabBarActiveTextColor='#b4282d'
tabBarInactiveTextColor='#333'
tabBarUnderlineStyle={styles.tabBarUnderline}
>
…………省略
</ScrollableTabView>
tabBarUnderline: {
backgroundColor: '#b4282d',
height: 2,
}
④ 添加数据
由于tab项很多,所以数据写在state里,减少重复代码,也便于修改
constructor(props) {
super(props);
this.state = {
label: ['推荐', '新品', '居家', '餐厨', '配件', '服装', '电器', '洗护', '杂货', '饮食', '婴童', '志趣'],
};
}
⑤ 遍历数据
renderScrollableTab() {
let label = this.state.label
return (
<ScrollableTabView
renderTabBar={() => <ScrollableTabBar />}
…………省略
>
{
label.map((item, index) => {
return (<Recommend tabLabel={item} key={index}/>)
})
}
</ScrollableTabView>
)
}
注:Recommend 是一个新加的页面,注意要在home.js引入。当然也可以不加新页面,return一个Text也可以。
home.js完整代码 https://github.com/gingerJY/example/blob/master/RN_scrollableTab/home.js
三、解决不显示问题
APP首页使用插件经常会出现一些别处没有的问题,这个tab下面内容不显示就是其中之一。解决方法为:
1、加一个是否显示的状态
constructor(props) {
super(props);
this.state = {
tabShow: false,
};
}
2、在初始化render之后,将状态设为true
componentDidMount() {
setTimeout(() => {
this.setState({
tabShow: true
});
}, 0)
}
3、render的时候判断this.state.tabShow,等setTimeout执行后改变了状态,才会渲染
if (this.state.tabShow){
return (
<ScrollableTabView
renderTabBar={() => <ScrollableTabBar />}
…………略
>
…………略
</ScrollableTabView>
)
}
这样就可以显示了。
END--------------------------------------------------
生命周期、布局
React Native学习(五)—— 使用插件react-native-scrollable-tab-view的更多相关文章
- 【学】React的学习之旅2 - React Component的生命周期
分成三个状态: Mounted Update Unmounted Mounted:当我们看到组件在浏览器中从无到有的效果的时候,mounted已经结束了,这个组件已经被mounted了 有这个阶段有2 ...
- react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- react native学习资料
一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...
- 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- React Native学习笔记之2
1:如何创建一个react native工程 首先进入到指定文件夹里面,然后在终端执行react-native init ReactNativeProject :其中ReactNativeProjec ...
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- React Native 学习资料
React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/
- React Native学习
学习 首先,假使你已经安装了Nodejs 6,也有使用npm进行Nodejs的包管理 npm install -g react-native-cli 也可以使用yarn作为包管理工具 npm inst ...
随机推荐
- 死磕 java集合之终结篇
概览 我们先来看一看java中所有集合的类关系图. 这里面的类太多了,请放大看,如果放大还看不清,请再放大看,如果还是看不清,请放弃. 我们下面主要分成五个部分来逐个击破. List List中的元素 ...
- java自动包装与解包
关于java的自动包装机制想必大家都用过吧,一般这些机制都用于在往容器中存储基本类型数据的时候,因为容器中不允许存在基本数据类型,所以就会调用自动包装机制,将基本数据类型转换为对象,将基本数据保存在对 ...
- jquery js 分页
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery.pager ...
- [BZOJ1192][HNOI2006]鬼谷子的钱袋 数学
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1192 大水题,把m分成二的幂次方和. #include<cstdio> #in ...
- 输入域名网站访问不了,ping与ftp都正常,这情况有可能域名被墙
被墙的风险 1.首先域名没有备案,而且服务器是国外的服务器, 2.域名解析到国外服务器 总结:以上两点有很大几率被墙的风险 被墙的解决方案: 1.换新域名并备案(不换新域名走第二步,域名一定要备案) ...
- SQL 索引自动维护计划脚本
脚本功能: 1,查询数据库中,碎片率在5%以上(官方推荐),有一定数据里的表的索引. 2.如果碎片率在5%<碎片率<=30% 执行重新组织索引.如果在30%以上,执行重建索引 建议在执行 ...
- Objective-C 是动态语言
Objective-C 的动态性是由 runtime 相关的库赋予的. 当然其他语言也完全可以运行在一个 Runtime 库上而获得动态性,由于多数高级语言的诞生都对应着一种编译器,因此将编译器的特性 ...
- docker 容器挂载主机目录,访问出现 cannot open directory /mnt/home/webroot/: Permission denied 的解决办法
问题原因及解决办法 原因是CentOS7中的安全模块selinux把权限禁掉了,至少有以下三种方式解决挂载的目录没有权限的问题: 1.在运行容器的时候,给容器加特权,及加上 --privileged= ...
- vue小结1
(1)渐进式vue 构建用户界面的渐进式框架 只关注视图层 (2)vue中的两个核心点 响应的数据绑定:当数据发生改变时,自动更新视图 利用Object.definedProperty(该属性IE8不 ...
- Domain Adaptation论文笔记
领域自适应问题一般有两个域,一个是源域,一个是目标域,领域自适应可利用来自源域的带标签的数据(源域中有大量带标签的数据)来帮助学习目标域中的网络参数(目标域中很少甚至没有带标签的数据).领域自适应如今 ...