react-navigation 5.0使用笔记 - 安装篇

安装react-navigation

使用5.0之前，我们使用yarn add react-navigation集成react-navigation，在5.0之后有所变动，需要通过yarn add @react-navigation/native集成。由于react-navigation同时依赖react-native-gesture-handler、react-native-reanimated、 react-native-screens、 react-native-safe-area-context、 @react-native-community/masked-view。因此我们需要同时安装这些依赖库。避免一个个安装太麻烦，我们执行以下命令，同时安装多个依赖库：
yarn add @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

注意：
iOS使用cocoapods管理项目的依赖库，如果是调试iOS，需要执行npx pod-install ios安装iOS项目的依赖库。

安装@react-navigation/stack

在网页中，通过点击跳转到到另一个页面，点击浏览器的返回按钮，回到上一个页面。在react-native中，没有标签，因此react-navigation提供了@react-navigation/stack来实现相似的操作。等同于iOS中的NavigationController，Android中点击返回按钮的操作。
调用yarn add @react-navigation/stack安装。

运行项目遇到的问题及解决方案

• 执行yarn add @react-navigation/stack时，提示【There appears to be trouble with your network connection. Retrying...】，我把wifi切换到手机热点就正常安装了。另外的解决方案可能是替换yarn的镜像源。我参考了这篇文章yarn 国内加速，修改镜像源，重新执行安装命令。

  • 在安装yrm的时候，又遇到

    PowerShell：因为在此系统上禁止运行脚本

    解决方案：PowerShell：因为在此系统上禁止运行脚本，解决方法

• 执行yarn android运行项目时，提示

A problem occurred configuring project ':react-native-screens'.
Could not resolve all artifacts for configuration ':react-native-screens:classpath'.
Could not download guava-26.0-jre.jar (com.google.guava:guava:26.0-jre)
Could not get resource 'https://jcenter.bintray.com/com/google/guava/guava/26.0-jre/guava-26.0-jre.jar'

根据提示分析，得出的结论是，@react-navigation/stack依赖guava，但是在下载guava时，遇到了网络问题。具体的说就是国内访问jcenter时速度慢甚至被墙。参考了Gradle Sync太慢？你需要使用阿里云仓库服务的代理仓库地址代替jcenter()、maven。修改project下的build.gradle文件：

buildscript {
    ext {
        buildToolsVersion = "30.0.1"
        minSdkVersion = 16
        compileSdkVersion = 30
        targetSdkVersion = 30
    }
    repositories {
        maven { url 'https://maven.aliyun.com/repository/jcenter'}
        maven { url 'https://maven.aliyun.com/repository/google'}
        jcenter()
        google()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        maven { url 'https://maven.aliyun.com/repository/jcenter'}
        maven { url 'https://maven.aliyun.com/repository/central'}
        maven { url 'https://maven.aliyun.com/repository/google' }
        jcenter()
        mavenCentral()
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

再次运行yarn android，成功！

总结

之前在Mac上运行react-native的时候，没有遇到过这么多安装问题。可能是公司的网络够快，同时我又翻了墙。
通过这次在windows上的尝试，也算是巩固了开发环境的基本搭建。了解了windows和mac开发的差异性。再者遇到“墙”的时候能够找到合适的方式来解决。

我一般解决依赖库安装慢的时候会采用以下方式：

1. 翻墙；
2. 通过https://www.ipaddress.com/,查找域名的ip。修改hosts。达到加速访问的效果。
3. 使用手机热点。
4. 查找国内镜像，替换国外镜像。