react-native navigation安装适配

win10系统vscode 安装 react-navigation。从网上看了好多，大部分都说的不全，或者是苹果系统，搞了好多天终于找到完整的操作。
任何一个依赖没安装，都会安装app失败，报错如图。出现类似报错尽量不要百度，给的答案都太老，没一个有用的。据说ios 不用这么麻烦，但是没苹果本，只能受这个罪

The development server returned response error code:500
解决方案：重新安装依赖，重新配置。

1. 安装主库
   yarn add react-navigation

   
   

   
   

2. 安装主库依赖的第三方库
   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

3. 引入导航组件的库
   
   yarn add react-navigation-stack
   yarn add react-navigation-drawer
   yarn add react-navigation-tabs

4. 为 react-native-screens 添加依赖
   用vscode 打开项目，在 android/app/build.gradle 文件中搜 implemetation （ctil+f），因为这个代码较多，在下面部分，直接搜。添加如下：
   
   implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
   implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

5. 配置 react-native-gesture-handle
   路径：android>app>src>main>java>MainActivity.java
   
   修改1：头部导入
   import com.facebook.react.ReactActivityDelegate;
   import com.facebook.react.ReactRootView;
   import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
   
   修改2：Mainactive底部增加（不是替换，是增加一个新的）：
      @Override
     protected ReactActivityDelegate createReactActivityDelegate() {
       return new ReactActivityDelegate(this, getMainComponentName()) {
         @Override
         protected ReactRootView createRootView() {
          return new RNGestureHandlerEnabledRootView(MainActivity.this);
         }
       };
   }

6. 在 index.js 中 导入 react-native-gesture-handler
   
   import "react-native-gesture-handler"

   
   

   
   
   

7. 如果需要安装icon的话
   安装icon ：yarn add react-native-vector-icons
   
   在目录文件 android/app/src/build.gradle  
   添加apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
   
   参考：
   https://github.com/oblador/react-native-vector-icons
   https://oblador.github.io/react-native-vector-icons/