Installation
Install the react-navigation
package in your React Native project.
yarn add react-navigation
# or with npm
# npm install --save react-navigation
Next, install react-native-gesture-handler. If you’re using Expo you don’t need to do anything here, it’s included in the SDK. Otherwise:
yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler
Link all native dependencies:
react-native link react-native-gesture-handler
No additional steps are required for iOS.
To finalise installation of react-native-gesture-handler for Android, be sure to make the necessary modifications to 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);
+ }
+ };
+ }
}
Hybrid iOS Applications (Skip for RN only projects)
If you're using React Navigation within a hybrid app - an iOS app that has both Swift/ObjC and React Native parts - you may be missing the RCTLinkingIOS
subspec in your Podfile, which is installed by default in new RN projects. To add this, ensure your Podfile looks like the following:
pod 'React', :path => '../node_modules/react-native', :subspecs => [
. . . // other subspecs
'RCTLinkingIOS',
. . .
]
有时在运行react-native run-android时会出现找不到..\node_modules\react-native-gesture-handler\android
这时你需要将项目目录下的android文件夹里面的settings.gradle修改一下,把单斜杠变成双斜杠,如下图: