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()传递的参数