React-Navigation包含三类组件：
- (1) StackNavigator：用来跳转页面和传递参数 (stack是堆叠的意思，页面一层层堆叠)
- (2) TabNavigator：底部导航栏，用来在同一屏幕下切换不同界面
- (3) DrawerNavigator：侧滑导航栏，用于轻松设置带抽屉导航的屏幕
(1) TabNavigator的使用：
- (1) 安装react-navigation
npm install react-navigation ---save
- (2) 引入TabNavigator
import { TabNavigator } from 'react-navigation';
- (3)TabNavigator的使用
const TabContainer = TabNavigator(
{
// 所要展示的组件
},
{
// 配置项
}
)
http://www.jianshu.com/p/0ad6c348157a
http://www.jianshu.com/p/7d435e199c96
http://blog.csdn.net/xiangzhihong8/article/details/71249167?ref=myread
（stackNavigator传值必看）http://www.jianshu.com/p/2af7b9a599ea
http://blog.csdn.net/sinat_17775997/article/details/66972413
http://www.jianshu.com/p/c24dfe7831c1
示例代码：
var App= TabNavigator({
Home:{
screen: HomePage,
navigationOptions:{
tabBarLabel: '主页',
tabBarIcon: ( { tintColor} ) => (
<Icon name="home" size={ 30 } color={ tintColor }></Icon>
)，
tabBarVisible: true //tatBar是否可见，当为false时，点击会隐藏
}
}
},{
animationEnabled:true, //切换页面时，是否有动画效果
swipeEnabled: true, //是否可以滑动切换Tab,滑动切换效果
backBehavior: 'none' //按Back键是否跳转到第一个tab(首页)，none为不跳转 （behavior是行为的意思）
lazy: true //是否根据需要懒惰呈现标签，而不是提前，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐为true
initialRouteName: 'Home' //第一次进入的界面
tabBarPosition: 'bottom', //设置tabBar的位置，ios默认在底部，android默认在顶部。（属性值：'top'，'bottom'）
tabBarOptions: { //配置标签栏的一些属性(底部标签栏)
indicatorStyle:{ height:0 }, //标签指示器的样式对象（选项卡底部的行）。(indicator是指示器的意思)安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题。
activeTintColor: '#ff7454', // 文字和图片选中颜色 (tint是上色的意思)
inactiveTintColor: '#333', // 文字和图片未选中颜色
showIcon: true, //TabBar图标是否显示，默认不显示，需要设置true才会显示
showLabel: true,//TabBar文字是否显示，默认显示。
style: { backgroundColor: 'white'}, //底部TabBar的样式
tabStyle:{ backgroundColor: '...'}
labelStyle: { fontSize: 14 }, //底部TabBar文字大小
iconStyle: { width:30, height:30},
scrollEnabled: false //是否启用可滚动选项卡 tabStyle：tab的样式
}
})
- (4)tabNavigator怎么更换不同的图片（实际开发中ui会给到不同状态下的icon）
Home: {
screen: Home, //对应的界面的名称（组件名称）
navigationOptions:{ // 也可以写在组件的static navigationOptions内
tabBarLabel: '主页',
tabBarIcon: ( { tintColor, focused } ) => (
focused ?
<Icon3 name="ios-home" size={36} color={tintColor}></Icon3>
:
<Icon name="home" size={34} color={tintColor}></Icon>
)
}
}
(2) StackNavigator的使用
- (1) 引入StackNavigator
import { StackNavigator } from 'react-navigation';
- (2) 使用StackNavigator
http://www.jianshu.com/p/7d435e199c96
http://www.jianshu.com/p/101d51408974
http://blog.csdn.net/sinat_17775997/article/details/70176688
(属性设置)http://www.jianshu.com/p/92e01be3416f
示例代码：
const Go = StackNavigator({
Index: {
screen: App, //导航的页面
navigationOptions:{
header:null // 没有顶部栏
}
},
ListDetail: {
screen: HomeDetail
}
},{
navigationOptions: {
headerTitle: '返回', //顶部栏的文字
headerStyle:{
height:50, //顶部栏的高度
backgroundColor: '#ff7454'
},
cardStack:{
gesturesEnabled: true //允许手势滑动
}
},
mode: 'card',
headerMode: 'screen' // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
});
- (3) 使android的stackNavigator文字居中（ 安卓默认在左边，ios默认居中 ）
(1)
-
在navigationOptions中设置headerTitleStyle的alignSelf为 ' center '即可解决。
-
static navigationOptions = ({navigation}) => ({
headerTitle: '视频页',
headerStyle:{
backgroundColor:'white',
},
headerTitleStyle:{
alignSelf:'center'
}
})
效果图
(番外篇：代码中用到了react-native-vector-icons所以这里插入讲解一下该矢量图标库的使用)
(3) react-native-vector-icons的使用(for安卓)：
- (1) 安装react-native-vector-icons
npm install react-native-vector-icons --save (安装时记得关掉服务器，这里有坑)
- (2) 安卓rnpm
npm install rnpm -g
- (3)链接rnpm
rnpm link
- (4) 拷贝Fonts
把 node_modules/react-native-vector-icons/Fonts 目录下字体文件全部拷到
android/app/src/main/assets/fonts目录 (注意fonts要小写，这里有坑，没有就自己建)
- (5) 在项目根目录中执行 react-native run-android
- (6) 引入图标
import Icon from 'react-native-vector-icons/FontAwesome';
import Icon2 from 'react-native-vector-icons/Ionicons';
- (6) 使用图标
案例1
<Icon name="rocket" size={30} color="#900" />
案例2
YangSheng: {
screen: YangSheng, //对应的界面的名称（组件名称）
navigationOptions:{ // 也可以写在组件的static navigationOptions内
tabBarLabel: '养生圈',
tabBarIcon: ( { tintColor } ) => (
<Icon2 name="statusnet" size={34} color={tintColor} />
)
}
}
- vector-icons官网：https://github.com/oblador/react-native-vector-icons
- 使用教程：http://lib.csdn.net/snippet/reactnative/42606
(番外篇：轮播图组件)
(4) react-native-swiper 轮播组件
- (1) 安装
npm install react-native-swiper --save
- (2) 引入
import Swiper from 'react-native-swiper';
render() {
if(this.state.swiperShow){
return(
<View>
<Swiper height={ 300 } //高度
showsButtons={false} //显示左右箭头
autoplay={true} //页面自动跳转
autoplayTimeout={ 2.5 } //设置每个页面自动滑动的停留时间
autoplayDirection={ true } //允许控制圆点的方向
index = { 1 } //从第几页开始播放
showsPagination={ true } //显示小圆点，(pagination是页码的意思)
paginationStyle={{ position:'absolute',bottom:10}}
activeDotStyle={{backgroundColor:'#ff7454', width: 10, height: 10}}
horizontal={ true } //滚动的内容横向排列
>
<View style={styles.win}>
<Image source={ require('../8.jpg')} style={styles.img}/>
</View>
<View style={styles.win}>
<Image source={ require('../10.jpg')} style={styles.img2} />
</View>
<View style={styles.win}>
<Image source={ require('../8.jpg')} style={styles.img}/>
</View>
</Swiper>
</View>
)
}else {
return (
<View style={{height:200}}>
<Image source={ require('../8.jpg')} />
</View>
);
}
}
}
(4) react-native-swiper在安卓上与TabNavigator共用时不显示内容问题
（这里是巨坑，记得填坑）
http://blog.csdn.net/qq_31280709/article/details/73441330<Image></Image>让图片充满元素
img2: {
width: width,
height:300,
resizeMode: 'stretch'
}
效果图
QQ截图20170718232441.png
