rn一到四路由版本（新）

一、1.x

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

Import { StackNavigator，TabNavigator } 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版本中先下载指定版本后，2与1的区别是：2从react-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

（2）yarn add react-native-gesture-handler

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

React -native link react-native-gesture-handler

（3）yarn 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

（2）yarn add react-native-gesture-handler

（3）yarn add react-native-reanimated

（4）yarn 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.x与3.x的话需要进行相关的一些配置。

转载于:https://www.cnblogs.com/jingguorui/p/11496928.html