rn一到四路由版本(新)

一、1.x

rn路由的1.x版本中,下载好版本之后,可以直接从react-navigation里面通过解构来获取相关的路由注册配置:

Import { StackNavigatorTabNavigator } from “react-navigation”

1)在router页面引入后

export default function configAppNavigator(){

Return StackNavigator({

Home:{

Screen:Home

}

})

}

StackNavigator里面有有两个参数;

(2)app页面引入后直接以组件的形式放在render里面,

Import  configAppNavigator   from “./router”

Render(){

Return(

<View>

<configAppNavigator/>

</View>

)

}

直接便可以使用;

二、2.x

2.x版本中先下载指定版本后,21的区别是:2react-navigation中解构出来的东西是createStackNavigation

Import  {  createStackNavigation  }  from  “react-navigation”

通过createStackNavigation 来注册路由的相关信息

Export  const  appRouter = createStackNavigation ({

Home:{

Screen:Home

}

})

基本上与1.x版本没有太大的区别;

三、3.x

3.x版本中,我的项目版本是0.60.5版本

1、

1)安装指定的路由版本,yarn  add  react-navigation@3.0.0

2yarn add react-native-gesture-handler

如果在0.6及以上的项目中是链接是自动的,在项目版本0.59及以下版本需要手动设置

React -native link react-native-gesture-handler

3yarn add react-native-reanimated

2、不同的是需要在路由中引入一个新东西createAppContainer

Import { createStackNavigator, createAppContainer } from “react-navigation”

通过createStackNavigator设置相关的路由配置项

Const Router = createStackNavigator({

Home:{

Screen:Home

}

})

Export default createAppContainer (  Router  )

通过createAppContainer 将路由当成参数放在里面默认导出。

四、4.x

在这个版本中与3.x版本不同的是需要多下载一个react-native-stack

1

1)安装指定的路由版本,yarn  add  react-navigation@4.0.0

2yarn add react-native-gesture-handler

3yarn add react-native-reanimated

4yarn add react-navigation-stack

2

Import  { createAppContainer }  from  “react-navigation”

Import  { createStackNavigator }  from  “react-navigation-stack”

四版本中的createStackNavigator 需要从react-native-stack里面引入;

3

Const Router = createStackNavigator ({

Home:{

Screen:Home

}

})

Export  default  createAppContainer ( Router )

不同点:

1.x-2.x:从 StackNavigator 变为了createStackNavigator

2.x-3.x:需要多下载两个依赖,并且需要引入createAppContainer

3.x-4.x:相对于三版本来说还要多下载一个react-navigation-stack,并且将createStackNavigator 放在了里面。

声明:在项目版本中我采用的是0.6版本以上;如果用0.59及一下版本,路由使用4.x3.x的话需要进行相关的一些配置。

posted @ 2019-09-10 13:02  很小的小雨  阅读(484)  评论(0编辑  收藏  举报