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} ) => (
- (4)tabNavigator怎么更换不同的图片（实际开发中ui会给到不同状态下的icon）
Home: {
screen: Home, //对应的界面的名称（组件名称）
navigationOptions:{ // 也可以写在组件的static navigationOptions内
tabBarLabel: '主页',
tabBarIcon: ( { tintColor, focused } ) => (
focused ?
(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
案例2
YangSheng: {
screen: YangSheng, //对应的界面的名称（组件名称）
navigationOptions:{ // 也可以写在组件的static navigationOptions内
tabBarLabel: '养生圈',
tabBarIcon: ( { 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';
- (3)使用
http://www.jianshu.com/p/4dba338ef37a
render() {
if(this.state.swiperShow){
return(
)
}else {
return (
);
}
}
}
(4) react-native-swiper在安卓上与TabNavigator共用时不显示内容问题
（这里是巨坑，记得填坑）
http://blog.csdn.net/qq_31280709/article/details/73441330让图片充满元素
img2: {
width: width,
height:300,
resizeMode: 'stretch'
}
效果图
QQ截图20170718232441.png