本文基于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有DefaultTabBarScrollableTabBar两种,这里使用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的更多相关文章

  1. 【学】React的学习之旅2 - React Component的生命周期

    分成三个状态: Mounted Update Unmounted Mounted:当我们看到组件在浏览器中从无到有的效果的时候,mounted已经结束了,这个组件已经被mounted了 有这个阶段有2 ...

  2. react系列(五)在React中使用Redux

    上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...

  3. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  4. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  5. react native学习资料

    一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...

  6. 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  7. React Native学习笔记之2

    1:如何创建一个react native工程 首先进入到指定文件夹里面,然后在终端执行react-native init ReactNativeProject :其中ReactNativeProjec ...

  8. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  9. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  10. React Native学习

    学习 首先,假使你已经安装了Nodejs 6,也有使用npm进行Nodejs的包管理 npm install -g react-native-cli 也可以使用yarn作为包管理工具 npm inst ...

随机推荐

  1. poj3040 Allowance

    思路: 贪心. 看了题解说是 先把面值从大到小排序然后从头往尾扫,只要不超额,能取多少去多少然后如果还有剩余,就从尾往头扫,尽量取,让他恰好超额 不过并不懂证明. 实现: #include <i ...

  2. 冒泡排序算法和简单选择排序算法的js实现

    之前已经介绍过冒泡排序算法和简单选择排序算法和原理,现在有Js实现. 冒泡排序算法 let dat=[5, 8, 10, 3, 2, 18, 17, 9]; function bubbleSort(d ...

  3. Android开发中使用代码删除数据库

    更多信息参考:Android开发中使用代码删除数据库 在Android开发中,如果用到数据库,就会有一个很麻烦的问题,就是有时候需要删除数据库很麻烦,要打开Android Device Monitor ...

  4. [Tunny]CSS LESS框架基础

    [黄映焜/Tunny,20140711] Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) ...

  5. uoj #15. 【NOIP2014】生活大爆炸版石头剪刀布

    石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一 样,则不分胜负.在<生活大爆炸>第二季第 8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的石头剪 ...

  6. Cygwin, MinGW/MSYS, MinGW-W64/MSYS2

    1. Cygwin http://www.cygwin.com/ Cygwin is a large collection of GNU and Open Source tools which pro ...

  7. Python之三元运算、集合、函数

    一.三元运算符 三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值 格式:[on_true] if [expression] else [on_false] res = 值1 if 条件 els ...

  8. chroot - 以 特定 根 目录 运行 命令 或者 交互式 shell

    总览 (SYNOPSIS) chroot [OPTION] NEWROOT [COMMAND...] chroot OPTION 描述 (DESCRIPTION) 以 NEWROOT 为 根 目录 运 ...

  9. C#委托与事件的关系(转载)

    1.C#中的事件和委托的作用?事件代表一个组件能够被关注的一种信号,比如你的大肠会向你发出想拉屎的信号,你就可以接收到上厕所.委托是可以把一个过程封装成变量进行传递并且执行的对象,比如你上蹲坑和上坐马 ...

  10. Python框架Django的入门

    本篇文章主要给大家介绍Django的入门知识: