在目前市面上的APP中，大部分都是选项与选项之间的切换，比如：微信、微博、QQ空间……, 在iOS中，我们可以通过TabItem类进行实现。那么，在React Native中，我们应该怎么实现呢？

在React Native中可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件是不支持Android的，当然后面我们可以自定义该组件。

TabBarIOS常见的属性

• View的所有属性都可以被继承

• barTintColor color 设置tab条的背景颜色

• tintColor color 设置tab条上被选中图标的颜色

• translucent bool 设置Tab栏是不是半透明的效果

学习iOS开发的同学应该都知道UITableView，几乎每个APP中都有它的存在，而且衍生出各种形态；那么同样，ListView就是在React Native中的tableView，而且更加简单和灵活易用；让我们一起搞定它。

前言

ListView组件是React Native中一个比较核心的组件，用途非常的广； 该组件设计用来高效的展示垂直滚动的数据列表：

• 首先创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组；

• 使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调函数，这个函数会接受数组中的每个数据作为参数，并返回一个可渲染的组件(该就是列表的每一行的item)。

##ListView常用的属性

ScrollView

相关属性样式全部继承

dataSource

ListViewDataSource 设置ListView的数据源

前沿

在开发中，从网络上加载数据一直是重点和难点，尤其是在做相应的细节优化发面，那么在React Native中通常是用哪种方式加载网络数据呢？

React Native中通常是通过 Ajax 请求从服务器获取数据，然后在componentDidMount 方法中创建 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI。

什么是fetch?

fetch 目前还不是 W3C 规范，由 whatag 负责出品。与 Ajax 不同的是，它的 API 不是事件机制，而采用了目前流行的 Promise（MDN Promise 教程）方式处理。

更多fetch的学习：https://segmentfault.com/a/1190000003810652

下图是通过fetch进行网络数据加载：

前言

从iOS开发的经验来看，scrollView无疑是移动开发中很重要的一个组件，比如后面会学到的ListView就是继承自它。那么，在开发中比如：焦点图、引导页等地方都有其的影子，那接下来我们一起来搞定它！

一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

• 两个要点：
  • ScrollView必须有一个确定的高度才能正常工作
    它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。
    通常有两种做法：
    第一种： 直接给该ScrollView进行设置高度(不建议)；
    第二种： ScrollView中不要加{flex:1}。
  • ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者

ScrollView中常用的属性

contentContainerStyle StyleSheetPropType(ViewStylePropTypes)

这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。

horizontal bool

当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。

keyboardDismissMode

enum(‘none’, “interactive”, ‘on-drag’)

用户拖拽滚动视图的时候，是否要隐藏软键盘。

• none（默认值），拖拽时不隐藏软键盘。

• on-drag 当拖拽开始的时候隐藏软键盘。

对于习惯了iOS开发的同学，可能会对React Native中组件的生命周期很困惑。在iOS中有一个ViewDidLoad来初始化，那么在RN中，又是在哪里呢？

看图分析

在下图中描述了React Native中组件的生命周期，我们可以根据其中的执行顺序在对应的函数中做对应的操作。

React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段，其中最常用的为实例化阶段，该阶段就是组件的构建、展示时期，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑的处理。

实例化阶段函数功能分析

getDefaultProps

该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数 中进行初始化和赋值；

在组件中，可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。

getInitialState

该函数是用于对组件的一些状态进行初始化；

由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值， 比如：

1
2
3
4

this.setState({
    activePage: activePage, 
    currentX: contentOffSetX  
});

注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

componentWillMount

相当于OC中的ViewWillAppear方法，在组件将要被加载在视图上之前调用，功能相对较少。