作者： admin

react native有自己提供的导航条，但是这里推荐使用react-native-vector-icons

按照以下步骤进行：

sudo npm i react-native-vector-icons@2.0.2 --save
sudo npm i rnpm@1.9.0 -g
下载好模块之后还不能直接使用，要执行一下步骤的其中之一
sudo react-native link react-native-vector-icons //先尝试这条
rnpm link react-native-vector-icons//上面不成功在尝试这样

成功提示：

rnpm-installinfoAndroid module react-native-vector-icons is already linked 

rnpm-installinfoiOS module react-native-vector-icons is already linked 

rnpm-installinfoLinking assets to ios project 

rnpm-installinfoLinking assets to android project 

rnpm-installinfoAssets have been successfully linked to your project 

想要什么图标就自己去对应的找名称：

http://fontawesome.io/icons/ 

用法可以参考：

https://github.com/oblador/react-native-vector-icons

案例：

var Icon=require('react-native-vector-icons/FontAwesome');

var {
 AppRegistry,
 StyleSheet,
 TabBarIOS,
 Text,
 View
} = react_native;

_renderContent: function(color: string, pageText: string, num?: number) {
 return (
   <View style={[styles.container, {backgroundColor: color}]}>
    <Text style={styles.tabText}>{pageText}</Text>
    <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
   </View>
 );
}

return (
 <TabBarIOS
   tintColor="white"
   barTintColor="darkslateblue">
     <Icon.TabBarItem
      title="搜索"
      iconName="search"
      selectedIconName="search"
      selected={this.state.selectedTab === 'blueTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'blueTab',
        });
      }}>
      {this._renderContent('#fff', 'Blue Tab')}
     </Icon.TabBarItem>

    <Icon.TabBarItem
      title="搜索"
      iconName="search"
      selectedIconName="search"
      selected={this.state.selectedTab === 'redTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'redTab',
          notifCount: this.state.notifCount + 1,
        });
      }}>
      {this._renderContent('#fff', 'Red Tab', this.state.notifCount)}
     </Icon.TabBarItem>

     <Icon.TabBarItem
       title="搜索"
       iconName="search"
       selectedIconName="search"
       selected={this.state.selectedTab === 'greenTab'}
       onPress={() => {
          this.setState({
            selectedTab: 'greenTab',
            presses: this.state.presses + 1
          });
       }}>
       {this._renderContent('#fff', 'Green Tab', this.state.presses)}
      </Icon.TabBarItem>
  </TabBarIOS>
);

注意：TabBarIOS是react native自带，记得要接口声明出来

如果遇到模块下载了没有加载出来就参考：《解决：react native找不到加载模块》

在开发react native时候突然发现模块确实是下载好了，用正常的方法去加载就是死活都加载不到，这是后我们应该清除一下npm缓存，例如：

watchman watch-del-all
sudo npm cache clean 
sudo npm install

getDefaultProps() //获取初始的配置参数，一般配置参数都是预先设置好的（react native默认配置）

例如，用户点击app第一次进入首页时发生了以下步骤
getInitialState() //获取初始的状态值，会发生变化的数据放入里面 （设置默认初始值）
componentWillMount() //在渲染显示视图之前要执行的函数方法，其实就是把之前设置的值获取到 （显示视图模式之前的回调）
render() //经过了componentWillMount后就开始显示视图模型了 （显示视图）
componentDidMount() //视图渲染完成后，要发生的回调 （显示视图后的回调）

以上顺序就是当手机刷新第一次用户看到页面时，调用到的函数。
页面不可能一点都不变化，例如点击分页，页面跳转总会发生变化，也就是状态会发生变化。例如，用户点击分页2时发生如下步骤

页面发生改变时情况一：
shouldComponentUpdate() //状态发生变化时，就触发此函数 （修改之前getInitialState里面的值）
componentWillUpdate() //shouldComponentUpdate函数确定触发时，此函数才会触发,这里必须返回布尔值，否则会出错
render() //显示视图 （页面发生更新）
componentDidUpdate() //更新后的回调

页面发生改变是情况二：（外部传入参数时）
外部传入参数时，外部props改变
componentWillReceiveProps() //外部的props改变时就触发此函数
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

———————–父、子组件嵌套之间的关系——————————-

当子模板嵌套在父模板时，查看个个周期都执行的先后顺序：

初次加载页面时：

界面改变时：