React Native小白實戰篇（三）-路由

隨着react-navigation的逐漸穩定，navigator光榮退休

1、導航器的定義

導航器也能夠當作是一個普通的React組件，你能夠經過導航器渲染通用元素，例如可配置的標題欄和選項卡欄

• createStackNavigator :相似於普通的navigator，屏幕上方導航欄
• createTabNavigator:createTabBavigator已棄用，使用createBottomTabNavigator和/或createMaterialTopnavigator替代
• createBottomTabNavigator:至關於IOS裏面的TabBarController,屏幕下方的標籤欄
• createMaterialTopTabNavitator:屏幕頂部的採蓮設計主題標籤欄
• createDrawerNavigator:抽屜效果，側邊畫出
• createSwitchNavigator:SwitchNavigator的用途是一次只顯示一個頁面

1. Screen navigation prop(屏幕導航屬性):經過navigation能夠完成屏幕之間的調度操做，例如打開另外一個屏幕
2. Screen navigaionOptions(屏幕導航屬性):經過navigationOptions能夠定製導航器顯示屏幕的方式（例如：頭部標題，選項卡標籤等）

2、導航器支持的Props

const  SomeNav=createStackNavigator/createBottomTabNavigator/createMaterialTopTabNavigator({})

<SomeNav 
    screenProps={xxx}
    ref={nav=>navigation=nav;}
    onNavigationStateChange=(prevState,newState,action)=>{}
/>
複製代碼

• ref:能夠經過ref屬性獲取到navigation;
• onNavigationStateChange(prevState,newState,action):每當導航器所管理的state發生變化時，都會回調該方法：

1. prevState:變化以前的state;
2. newState:新的state;
3. 致使state變化的action;

• screenProps:向子屏幕傳遞額外的數據,子屏幕能夠經過this.props.screenProps獲取到該數據。

3、導航器中的關鍵一員-navigation

當導航器中的屏幕被打開時，他會收到一個navigation prop， navigation prop是整個導航環節中的關鍵一員

1.功能

• navigate：跳轉到其餘界面
• state:屏幕當前的state
• setParams:改變路由的params
• goBack:關閉當前屏幕
• dispatch：向路由發送一個action
• addListener:訂閱導航生命週期的更新
• isFocused:true標識了屏幕獲取了焦點
• getParams:獲取具備回退的特定參數
• dangerouslyGetParent:返回父導航器

4、StackNavigator

當且僅當navigator是stacknavigation時，this.props.navigation上有一些特殊功能

• push：導航到堆棧中的一個新的路由
• pop:返回堆棧的上一個頁面
• popToTop:跳轉到堆棧中最頂層的頁面
• replace：用新路由替換當前路由
• reset：擦除導航器狀態並將其替換爲多個操做的額結果
• dismiss:關閉當前棧

5、使用navigate進行界面之間的跳轉

• navigation.navigate({routeName,params,action,key})或navigation.navigate(routeName,params,action)

1. routeName:要跳轉的界面的路由名，也就是導航其中配置的路由名
2. params:要傳遞給下一個界面的參數
3. action:若是該界面是一個navigator的話，將運行這個sub-action;
4. key:要導航到的路由的可選標識符。若是已存在，將後退到此路由；

export const AppStacknavigator=createStackNavigator({
    HomeScreen:{
        screen:HomeScreen
    },
    Page1:{
        screen:Page1
    }
})
class HomeScreen extends React.Component{
    render(){
        const {navigate}=this.props.navigation;
        return (
            <View>
                <Text>This is HomeScreen</Text>
                <Button 
                    onPress={()=>navigate('Page1',{name:"Devio"})}
                    title="Go to Page1"
                />
            </View>
        )
    }
}
class Page1 extends React.Component{
    render(){
        const {navigate}=this.props.navigation;
        return (
            <View>
                <Text>Page1</Text>
                 
            </View>
        )
    }
}
複製代碼

6、使用state的params

能夠經過this.props.state.params來獲取經過setParams()/navigation.navigate()傳遞的參數