前言
react-native相关的库迭代的比较快,老版本的库可能维护时间不长,如果遇到bug可能也不能及时解决,所以如果项目迭代时间允许还是要尽早升级最新版本,获取新的特性或者性能。
1.x和2.x版本
yarn add react-navigation
# or with npm
# npm install --save react-navigation
3.x版本
yarn add react-navigation
# or with npm
# npm install react-navigation
yarn add react-native-gesture-handler react-native-reanimated
# or with npm
# npm install react-native-gesture-handler react-native-reanimated
1.如果你的ReactNative版本是0.59及以下,还需要手动通过link命令添加依赖
react-native link react-native-reanimated
react-native link react-native-gesture-handler
link后IOS的设置就完成了,但在Android端还需要一些配置。
对于react-native-gesture-handler这个库还需要做如下配置:
在项目根目录Android中MainActivity.java文件中,添加如下配置:
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
// 导入下面三个包
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
// 重写createReactActivityDelegate方法
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
2.如果你项目的ReactNative版本是0.60及以上,就不用手动执行link命令添加依赖了,ios端需要执行如下命令完成link依赖, 注意需要安装Cocoapods。
cd ios
pod install
cd ..
4.x版本
yarn add react-navigation
# or with npm
# npm install react-navigation
yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23
ReactNative 0.60以及更高,不需要手动执行link命令,对于ios端,需要执行如下命令
cd ios
pod install
cd ..
Android端
对于新添加的库:react-native-screens, 还需要如下配置,进行项目根目录android/app/build.gradle文件中,添加如下依赖:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
如果你的ReactNative版本是0.59及一下,则需要如下配置:
react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens
使用androidx配置支持jetifier:
yarn add --dev jetifier
# or with npm
# npm install --save-dev jetifier
在项目的package.json文字文件添加脚本:
"scripts": {
"postinstall": "jetifier -r"
}
之后,运行刚添加的postinstall
yarn postinstall
# or with npm
# npm run postinstall
对于Android来说, react-native-gesture-handler这个库还需要进一步配置,和3.x版本中一致,在MainActivity.java文件中导包,并重写响应方法:
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
最后,在入口文件比如index.js 或者 App.js文件中,导入下面内容
import 'react-native-gesture-handler'
注意
4.x版本中创建页面导航路由的组件createStackNavigator从react-navigation库中移除,需要从react-navigation-stack库中获取
使用yarn add react-navigation-stack安装依赖,然后进行导入使用。
import { createStackNavigator } from ‘react-navigation-stack’;
5.x版本
yarn add @react-navigation/native@^5.x
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
注意
如果你的react native版本低于0.60,还要执行一下如下命令
react-native link
ios端
npx pod-install ios
入口文件index.js,或app.js
使用NavigationContainer包裹整个app
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}
6.x版本
前置条件
- react-native >= 0.63.0
- expo >= 41 (使用Expo)
- typescript >= 4.1.0 (使用TypeScript)
要看一下项目当前使用的RN版本
添加依赖
yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context
如果使用Expo管理项目的项目的话,上面第二步改成下面命令
expo install react-native-screens react-native-safe-area-context
ios端
npx pod-install ios
Android端
react-native-screens在安卓端还需要添加如下设置才能正常使用。在项目的android/app/src/main/java//MainActivity.java.添加如下代码:
// 顶部导包
import android.os.Bundle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
入口文件index.js,或app.js
使用NavigationContainer包裹整个app
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}
最后
运行如下命令
react-native run-ios 或者 react-native run-android 编译并运行项目就可以了
最后
ReactNative开发者们,你们现在使用React-Navigation版本是多少?欢迎在文章底部留言参加讨论。
个人网站:https://wayne214.github.io
欢迎关注个人微信公众号:君伟说。