美文网首页
RN react-navigaiton

RN react-navigaiton

作者: DW_d01e | 来源:发表于2019-01-22 11:58 被阅读0次

    1. react-navigation7种常见导航

    • createStackNavigator 普通的Navigator,屏幕上方导航
    • createTabNavigator:createBottomTabNavigator和 createMaterialTopTabNavigator
    • createBottomTabNavigator:屏幕下方标签栏
    • createMaterialTopTabNavigator:屏幕上方标签栏
    • createDrawerNavigator:抽屉效果导航,android左侧划入menu
    • createSwitchNavigator:一次只显示一个页面

    2.导航器所支持的Props

    const SomeNav = createStackNavigator/createBottomTabNavigator({
        //config
    })
    <SomeNav
       screenProps={xxx}
       ref={nav => {navigation = nav;}}
       onNavigationStateChange(prevState,newState,action) =>{
    }
    />
    
    • ref:可以通过ref属性来获取navigation
    • onNavigationStateChange(prevState,newState,action):每次当导航器的管理的state发生变化时,都会回调该方法;prevState表示变化之前的state;newState表示新的state;action表示导致变化的action;
    • screenProps:向子屏幕传递额外的数据,子屏幕可以通过this.props.screenProps获取到该数据

    3.navigation包含的功能

    • navigate:跳转到其他页面
    • state:屏幕当前的state
    • setParams:改变路由的params;
    • goBack:关闭当前屏幕;
    • dispatch:向路由发送一个action
    • addListener: 订阅导航生命周期的更新
    • isFocused:true标识屏幕获取了焦点
    • getParam:获取具有回退的特定参数

    如果一个navigation没有navigatesetParams以及goBack,可以使用navigationdispatch一个action去跳转新页面

    const {navigation,theme,selectedTab} = this.props;
    const resetAction = StackActions.reset({
        index:0,
       actions:[
             NavigationActions.navigate({
                 routeName:'HomePage',
                 params:{
                   theme:theme,
                   selectedTab:selectedTab
             },  
          })
       ]
    })
    navigation.dispatch(resetAction)
    
    
    

    相关文章

      网友评论

          本文标题:RN react-navigaiton

          本文链接:https://www.haomeiwen.com/subject/sxhljqtx.html