TabNavigator
2018年7月23日
15:46
通过TabNavigator来实现底部菜单栏，因为这是一个第三方的库，所以使用这个TabNavigator需要先下载
npm install --save react-navigation
然后导入
Import TabNavigator from 'react-native-tab-navigator'
因为是个第三方库，它封装得很好，需要几个导航按钮就直接在tabnavigator根视图下面添加Item就行了
每个Item的样式都可以自己设置
每个Item又是包含了两个部分：Tab和View
效果图：
1）.selected：
这个参数是用来指定显示哪个Item，通过后面的===来进行匹配，我们可以在state里面预设一个第一个显示的Item，然后他就会带着这个值去找和哪个Item的匹配，找到匹配的就把它显示出来。
2）.title：
从上图可以看出每个Item的Tab都是由两部分组成的，一张图片（Icon）和一个文字（title），而title属性就是文字
3）.selectedTitleStyle：
通过这个英文我们也能看出他描述的是被选中时title的类型，这里我设置了颜色
接着我想了下，这里既然能随意设置样式，我们就可以对他进行类似高亮的处理了
可以看到区别于上图，我们就让被选中的tab凸起了，个人觉得还是好看点了
4）.renderIcon：
同样我们能从方法名中看出它的用法——渲染Icon（就直接指定一张图片）
上面我们已经知道了每个Tab是由两个部分组成的，就是Icon和title，现在这个方法就是来渲染Icon的，一般Icon都是一张图片，所以在这里我们可以给它指定一张图片
5）.renderSelectedIcon：
同上——渲染Icon选中时的状态，同selectedTitleStyle可以设置它各个属性的变化
整个Tab这里就设置完了，还需要设置的就是View，当然View中肯定可以加些复杂的页面，但是这里主要是使用下这个TabNavigator就不具体写页面了，就放了个背景上去以此区分
注意：在react-native中“==”和“===”的区别，“===”：
This inspection reports usages of JavaScript equality operators which may cause unexpected type coercions. It is considered a good practice to use the type-safe equality operators === and !== instead of their regular counterparts == and !=.
Depending on the option selected, this will either highlight:
All usages of == and != operators.
All usages except comparison with null. Some code styles allow using x == null as a replacement for x === null || x === undefined.
Only suspicious expressions, such as: == or != comparisons to 0, '', null, true, false, or undefined.
这里它提示信息提到可能会出现强制类型转换，所以我们可以推断出，===肯定是先进行类型检查，再去比较数据，所以这个“===”相当于是一个类型检查，只有相同类型的才能进行比较
注（一下是今天做这个东西遇到的小问题）：
图片适应屏幕：
这是在做欢迎页碰到的问题，以前在Android中这样的直接用splashactivity做了，直接match parent就可以了，现在这个设置样式还不太熟悉，还稍微看了下。以下是代码：
image:{
flex:1,
alignItems:'center',
justifyContent:'center',
width:null,
height:null,
//resizeMode:Image.resizeMode.contain,
}
生命周期：
就在做欢迎页的时候对什么时候该干什么又有点忘记了，重新回顾下
文件的路径：
因为这次我是把这几个JS文件放在了page目录下，所以在取图片的时候就“../res”这个“../”就是跳转到上级目录，所以这样写才能访问，同理上上级“../../”不然会报错