React-Navigation包含三類組件：
- (1) StackNavigator：用來跳轉(zhuǎn)頁面和傳遞參數(shù) (stack是堆疊的意思，頁面一層層堆疊)
- (2) TabNavigator：底部導航欄，用來在同一屏幕下切換不同界面
- (3) DrawerNavigator：側(cè)滑導航欄盗飒，用于輕松設(shè)置帶抽屜導航的屏幕
(1) TabNavigator的使用：
- (1) 安裝react-navigation
npm install react-navigation ---save
- (2) 引入TabNavigator
import { TabNavigator } from 'react-navigation';
- (3)TabNavigator的使用
const TabContainer = TabNavigator(
{
// 所要展示的組件
},
{
// 配置項
}
)
http://www.reibang.com/p/0ad6c348157a
http://www.reibang.com/p/7d435e199c96
http://blog.csdn.net/xiangzhihong8/article/details/71249167?ref=myread
（stackNavigator傳值必看）http://www.reibang.com/p/2af7b9a599ea
http://blog.csdn.net/sinat_17775997/article/details/66972413
http://www.reibang.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鍵是否跳轉(zhuǎn)到第一個tab(首頁)钉寝，none為不跳轉(zhuǎn) （behavior是行為的意思）
lazy: true //是否根據(jù)需要懶惰呈現(xiàn)標簽弧呐，而不是提前闸迷，意思是在app打開的時候?qū)⒌撞繕撕灆谌考虞d，默認false,推薦為true
initialRouteName: 'Home' //第一次進入的界面
tabBarPosition: 'bottom', //設(shè)置tabBar的位置俘枫，ios默認在底部腥沽，android默認在頂部。（屬性值：'top'鸠蚪，'bottom'）
tabBarOptions: { //配置標簽欄的一些屬性(底部標簽欄)
indicatorStyle:{ height:0 }, //標簽指示器的樣式對象（選項卡底部的行）巡球。(indicator是指示器的意思)安卓底部會多出一條線，可以將height設(shè)置為0來暫時解決這個問題邓嘹。
activeTintColor: '#ff7454', // 文字和圖片選中顏色 (tint是上色的意思)
inactiveTintColor: '#333', // 文字和圖片未選中顏色
showIcon: true, //TabBar圖標是否顯示酣栈，默認不顯示，需要設(shè)置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怎么更換不同的圖片（實際開發(fā)中ui會給到不同狀態(tài)下的icon）
Home: {
screen: Home, //對應的界面的名稱（組件名稱）
navigationOptions:{ // 也可以寫在組件的static navigationOptions內(nèi)
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.reibang.com/p/7d435e199c96
http://www.reibang.com/p/101d51408974
http://blog.csdn.net/sinat_17775997/article/details/70176688
(屬性設(shè)置)http://www.reibang.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中設(shè)置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 (安裝時記得關(guān)掉服務(wù)器窖维，這里有坑)
- (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) 在項目根目錄中執(zhí)行 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內(nèi)
tabBarLabel: '養(yǎng)生圈',
tabBarIcon: ( { tintColor } ) => (
<Icon2 name="statusnet" size={34} color={tintColor} />
)
}
}
- vector-icons官網(wǎng)：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} //頁面自動跳轉(zhuǎn)
autoplayTimeout={ 2.5 } //設(shè)置每個頁面自動滑動的停留時間
autoplayDirection={ true } //允許控制圓點的方向
index = { 1 } //從第幾頁開始播放
showsPagination={ true } //顯示小圓點铸史，(pagination是頁碼的意思)
paginationStyle={{ position:'absolute',bottom:10}}
activeDotStyle={{backgroundColor:'#ff7454', width: 10, height: 10}}
horizontal={ true } //滾動的內(nèi)容橫向排列
>
<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共用時不顯示內(nèi)容問題
（這里是巨坑，記得填坑）
http://blog.csdn.net/qq_31280709/article/details/73441330<Image></Image>讓圖片充滿元素
img2: {
width: width,
height:300,
resizeMode: 'stretch'
}
效果圖
QQ截圖20170718232441.png
