react navigation踩坑

这里所有问题都是在react navigation 4.4中遇到的

1. react navigation需要安装额外依赖

   • react-native-gesture-handler

   • react-native-reanimated

   • react-native-safe-area-context

   • react-native-screens

   • react-navigation-stack

2. 安装react-native-gesture-handler后，脚手架卡在44%：这种情况大概就是网络被墙了，如果宽带不行就换移动网络。

3. Attempt to invoke interface method ‘boolean com.swmansion.reaimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled()’on a null object reference

   • 这是因为react-native-reanimated这个依赖升级了，官方react navigation 4.x版在文档中没有提及处理。解决办法：

     // MainApplication.java
     import com.facebook.react.bridge.JSIModulePackage; // <- 添加
     import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- 添加
     // ...
     
     public class MainApplication extends Application implements ReactApplication {
       private final ReactNativeHost mReactNativeHost =
           new ReactNativeHost(this) {
             @Override
             public boolean getUseDeveloperSupport() {
               return BuildConfig.DEBUG;
             }
     
             @Override
             protected List<ReactPackage> getPackages() {
               @SuppressWarnings("UnnecessaryLocalVariable")
               List<ReactPackage> packages = new PackageList(this).getPackages();
               // Packages that cannot be autolinked yet can be added manually here, for example:
               // packages.add(new MyReactNativePackage());
               return packages;
             }
     
             @Override
             protected String getJSMainModuleName() {
               return "index";
             }
               // 找到这个位置，并加入以下Override方法
             @Override
             protected JSIModulePackage getJSIModulePackage() {
                 return new ReanimatedJSIModulePackage();
             }
           };
         // ...
     }

4. react-navigation-stack这个依赖是用来创建路由栈的，不是react navigation自带的，需要额外安装。

5. react-native-reanimated会导致react-devtools闪退，直接卸载解决问题。