win10系统vscode 安装 react-navigation。从网上看了好多,大部分都说的不全,或者是苹果系统,搞了好多天终于找到完整的操作。
任何一个依赖没安装,都会安装app失败,报错如图。出现类似报错尽量不要百度,给的答案都太老,没一个有用的。据说ios 不用这么麻烦,但是没苹果本,只能受这个罪
The development server returned response error code:500
解决方案:重新安装依赖,重新配置。
-
安装主库 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
-
为 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'
-
配置 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); } }; }
-
在 index.js 中 导入 react-native-gesture-handler import "react-native-gesture-handler"
-
如果需要安装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/