navigation的幾個難點和問題：
1.底部tab是否可以加上中間的大按鈕？ 如果加上，如何觸發事件？ js文件放哪？
2.navigation的登錄注冊頁面。成功后應該不能返回剛剛的登錄頁面？清空頁面棧？
3.登錄成功跳轉到大廳？意圖頁面？還是當前所在頁？彈出model是不是可以解決所有問題？登錄成功如何重刷當前頁？
一、前言
在 React Native 中，官方已經推薦使用 react-navigation 來實現各個界面的跳轉和不同板塊的切換。 react-navigation 主要包括三個組件：
TabNavigator切換組件 ，用來實現同一個頁面上不同界面的切換，即tab選項卡StackNavigator導航組件，用於實現各個頁面之間的跳轉，即頁面跳轉（通過stack棧記錄）DrawerNavigator抽屜組件，可以實現側滑的抽屜效果
本次我們主要說說前兩個，DrawerNavigator 筆者不曾使用
（一）、怎么使用navigation（入口和概覽）
export default class Navigator extends Component { render() { return( <Navigator /> ) } } const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs)
上面的StackNavigator就是react-navigation 的導航組件：
StackNavigator導航組件，用於實現各個頁面之間的跳轉，即頁面跳轉（通過stack棧記錄）
那么它的兩個參數 StackNavigator(StackRouteConfigs, StackNavigatorConfigs) 又是干啥的呢？
（二）、怎么使用StackNavigator
const StackRouteConfigs = { MainTab: { screen: MainTab, navigationOptions: ({navigation}) => ({ //主頁大廳的tab及其相關頁面 }), }, Datail: { screen: DatailPage, navigationOptions: ({navigation}) => ({
}), }, }; const StackNavigatorConfig = { initialRouteName: 'MainTab', //默認先加載的頁面 navigationOptions: { //路由頁面的配置選項，可定義頭部內容、樣式 }, mode: 'card', //頁面跳轉方式，card 表示原生系統默認的方式和 modal只針對iOS平台，模態跳轉 headerMode: 'screen',頁面跳轉時，頭部的動畫模式，有 float 、 screen 、 none 三種 };
StackRouteConfigs參數表示各個頁面路由配置，類似於android原生開發中的 AndroidManifest.xml ，它是讓導航器知道需要導航的路由對應的頁面。
StackNavigatorConfigs參數表示導航器的配置，包括導航器的初始頁面、各個頁面之間導航的動畫、頁面的配置選項等等：
initialRouteName - 導航器組件中初始顯示頁面的路由名稱，如果不設置，則默認第一個路由頁面為初始顯示頁面 initialRouteParams - 給初始路由的參數，在初始顯示的頁面中可以通過 this.props.navigation.state.params 來獲取 navigationOptions - 路由頁面的配置選項，它會被 RouteConfigs 參數中的 navigationOptions 的對應屬性覆蓋。 paths - 路由中設置的路徑的覆蓋映射配置 mode - 頁面跳轉方式，有 card 和 modal 兩種，默認為 card ： card - 原生系統默認的的跳轉 modal - 只針對iOS平台，模態跳轉 headerMode - 頁面跳轉時，頭部的動畫模式，有 float 、 screen 、 none 三種： float - 漸變，類似iOS的原生效果 screen - 標題與屏幕一起淡入淡出 none - 沒有動畫 cardStyle - 為各個頁面設置統一的樣式，比如背景色，字體大小等 transitionConfig - 配置頁面跳轉的動畫，覆蓋默認的動畫效果 onTransitionStart - 頁面跳轉動畫即將開始時調用 onTransitionEnd - 頁面跳轉動畫一旦完成會馬上調用
上面的MainTab表示大廳內的Tab內容
也就是：
TabNavigator切換組件 ，用來實現同一個頁面上不同界面的切換，即tab選項卡
它怎么使用呢？？？
（三）、怎么使用TabNavigator
const MainTab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const TabNavigatorConfigs = { initialRouteName: 'Recommend', tabBarComponent: TabBarBottom, tabBarPosition: 'bottom', lazy: true, tabBarOptions: { activeTintColor: 'red', inactiveTintColor: '#999', showIcon: true, indicatorStyle: {height: 0}, style: { backgroundColor: '#fff', height: (height*0.08 < 65) ? 65 : height*0.08, paddingVertical: (height*0.08 < 65) ? 5 : height*0.08/13, }, labelStyle: {fontSize: 11}, } };
const TabRouteConfigs = { Attention: { screen: AttentionScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '關注', tabBarIcon: ({focused, tintColor}) => ( <Image source={focused ? LocalImage.AttentionSelectedImage : LocalImage.AttentionImage} style={{width: '33%'}} resizeMode='contain'> </Image> ), }), }, Recommend: { screen: RecommendScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '推薦', tabBarIcon: ({focused, tintColor}) => ( <Image source={focused ? LocalImage.RecommendSelectedImage : LocalImage.RecommendImage} style={{width: '33%'}} resizeMode='contain'> </Image> ), }), }, Library: { screen: LibraryScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '倉庫', tabBarIcon: ({focused, tintColor}) => ( <Image source={focused ? LocalImage.LibrarySelectedImage : LocalImage.LibraryImage} style={{width: '33%'}} resizeMode='contain'> </Image> ), }), }, Profile: { screen: ProfileScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '我的', tabBarIcon: ({focused, tintColor}) => ( <Image source={focused ? LocalImage.ProfileSelectedImage : LocalImage.ProfileImage} style={{width: '33%'}} resizeMode='contain'> </Image> ), }), }, };
TabNavigator 切換組件 TabNavigatorConfigs 的配置tabBarComponent - Tab選項卡組件，有 TabBarBottom 和 TabBarTop 兩個值，在iOS中默認為 TabBarBottom ，在Android中默認為 TabBarTop 。 TabBarTop - 在頁面的頂部 TabBarBottom - 在頁面的底部 tabBarPosition - Tab選項卡的位置，有 top 或 bottom 兩個值 swipeEnabled - 是否可以滑動切換Tab選項卡 animationEnabled - 點擊Tab選項卡切換界面是否需要動畫 lazy - 是否懶加載頁面 initialRouteName - 初始顯示的Tab對應的頁面路由名稱 order - 用路由名稱數組來表示Tab選項卡的順序，默認為路由配置順序 paths - 路徑配置 backBehavior - androd點擊返回鍵時的處理，有 initialRoute 和 none 兩個值 initailRoute - 返回初始界面 none - 退出 tabBarOptions - Tab配置屬性，用在 TabBarTop 和 TabBarBottom 時有些屬性不一致： 用於 TabBarTop 時： activeTintColor - 選中的文字顏色 inactiveTintColor - 未選中的文字顏色 showIcon - 是否顯示圖標，默認顯示 showLabel - 是否顯示標簽，默認顯示 upperCaseLabel - 是否使用大寫字母，默認使用 pressColor - android 5.0以上的MD風格波紋顏色 pressOpacity - android 5.0以下或者iOS按下的透明度 scrollEnabled - 是否可以滾動 tabStyle - 單個Tab的樣式 indicatorStyle - 指示器的樣式 labelStyle - 標簽的樣式 iconStyle - icon的樣式 style - 整個TabBar的樣式 用於 TabBarBottom 時： activeTintColor - 選中Tab的文字顏色 activeBackgroundColor - 選中Tab的背景顏色 inactiveTintColor - 未選中Tab的的文字顏色 inactiveBackgroundColor - 未選中Tab的背景顏色 showLabel - 是否顯示標題，默認顯示 style - 整個TabBar的樣式 labelStyle - 標簽的樣式 tabStyle - 單個Tab的樣式
三、結語
暫時就這樣