react-navigation 3.x版本的安裝以及react-native-gesture-handler配置

 

一、安裝依賴，使用npm或yarn命令，3.x版本必須安裝react-native-gesture-handler

react-navigation
react-native-gesture-handler

 

二、 配置react-native-gesture-handler，可以執行如下命令

react-native link react-native-gesture-handler

android執行此命令，有時候會沒有效果，需要檢查核實

• 查看android/settings.gradle
• 查看android/app/build.gradle
• 查看android/app/src/main/java/com/projectname/MainActivity.java和MainApplication.java

//settings.gradle
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

//app\build.gradle
implementation project(':react-native-gesture-handler')


//MainApplication.java

import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNGestureHandlerPackage()
      );
    }

    ...
  };


//MainActivity.java
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  ...

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
       return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

 

三、 undefined is not an object (evaluating 'RNGestureHandlerModule.State'）

　　以及 undefined is not an object (evaluating 'RNGestureHandlerModule.Direction'）

相關錯誤都是因為react-native-gesture-handler沒有配置好