安裝主庫
yarn add react-navigation
安裝主庫依賴的第三方庫文件
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-safe-area-context
yarn add @react-native-community/masked-view
yarn add react-native-screens
根據需要引入各導航組件的庫
yarn add react-navigation-stack
yarn add react-navigation-drawer
yarn add react-navigation-tabs
執行pod install
cd ios
pod install
爲react-native-screens添加相關依賴
爲了在Android上完成安裝,還需要在android/app/build.gradle中爲react-native-screens添加相關依賴:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
配置react-native-gesture-handler
爲了在Android上能夠使react-native-gesture-handler有效,需要修改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 or App.js中導入react-native-gesture-handler
import 'react-native-gesture-handler';`在這裏插入代碼片`