fujia.site

React Native中日常开发问题汇总!

环境

说明一下，所有的问题与解决方案，小编都是实践使用过被证实有效的。这里提供小编的开发环境与主要组件的版本，以供参考！

开发环境

OS - Mac mini (M1)/macOS 12.4
Xcode - 13.2.1
Android Studio - 最新版
测试机

Android：真机(设备名称：Honor 7X，Android版本：9)；
iOS：模拟器(iPhone 13)。

主要组件版本

react-native - 0.68.2
react - 17.0.2
react-redux - 8.x
recyclerlistview - 3.x
redux - 4.x
react-navigation - 6.x

tips:

系统与开发环境小编一般是保持最新；
react-native并没有启用新架构hermex。

全局配置

常用技巧

清除 console.log 方法，推荐：重写 console.log 的函数，将它置空。

在项目的入口文件中 index.js 添加下面的代码：

               1
2
3
4
5
6
7
8
               if (!__DEV__) {
  const emptyFunc = () => {};
  // NOTE: 不要使用globalThis
  global.console.info = emptyFunc;
  global.console.log = emptyFunc;
  global.console.warn = emptyFunc;
  global.console.error = emptyFunc;
}

               COPY

tips:

__DEV__ 是 RN 提供的变量;
global 与 browser 中 window 对象类似，是一个最顶层的全局对象。

启用新架构Hermes，执行cd ios && pod install命令时安装失败问题

问题描述

               1
2
3
4
5
6
7
8
9
10
               pod install

[!] Error installing hermes-engine
[!] /usr/bin/curl -f -L -o /var/folders/70/x0nk_t0s2m93xbzq4x7px0t40000gn/T/d20220725-6652-9fn63t/file.tgz https://github.com/facebook/hermes/releases/download/v0.11.0/hermes-runtime-darwin-v0.11.0.tar.gz --create-dirs --netrc-optional --retry 2 -A 'CocoaPods/1.10.2 cocoapods-downloader/1.4.0'

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  1  440M    1 6765k    0     0  23061      0  5:33:54  0:05:00  5:28:54 1189k
curl: (92) HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1)

               COPY

问题分析

是电脑安装的curl库，默认使用了http2协议导致的不兼容问题。

解决方案

指定协议，使用下面的命令手动安装，如下：

               1
               /usr/bin/curl --http1.1 -f -L -o /var/folders/70/x0nk_t0s2m93xbzq4x7px0t40000gn/T/d20220725-6652-9fn63t/file.tgz https://github.com/facebook/hermes/releases/download/v0.11.0/hermes-runtime-darwin-v0.11.0.tar.gz --create-dirs --netrc-optional --retry 2 -A 'CocoaPods/1.10.2 cocoapods-downloader/1.4.0'

               COPY

其它说明

GitHub 下的 release 库下载失败问题，下着下着就停了，小编使用的手机流量(联通)的方式，速度能达到3~4M，仅供参考；
clean 和 re-install pods的步骤
- sudo gem install cocoapods-clean；
- pod deintegrate；
- pod install。

tips：遇到这类问题，很难有什么一劳永逸的方法，国内的网络环境真的是很复杂，只能慢慢尝试，因此，很重要的一点是不要着急。

tips：这里分享一个最近发现的不错的VPN软件 —— SaKuraCat，可以自行搜索了解下，最大的特点是便宜。

Android

配置相关

Q1: TextInput的光标颜色一直是系统自带的颜色，如何解决？

描述：在组件中配置了selectionColor的值，在iOS中没有问题，但是在Android中的开发环境下(真机调试)光标颜色一直是系统自带的颜色，注意：没有在生产环境测试过。
解决方案：原生定义全局的光标颜色。

2.1 在[project root]/android/app/src/main/res/values新建一个colors.xml的文件，定义如下内容：

               1
2
3
4
               <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorGray">#333333</color>
</resources>

               COPY

文件内容表示定义了一个名为colorGray的变量，值为#333333。

2.2 在[project root]/android/app/src/main/res/values/styles.xml如下使用：

               1
2
3
4
5
6
7
8
               <resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="colorControlActivated">@color/colorGray</item>
    </style>
</resources>

               COPY

2.3 在终端下重新执行yarn android命令。

其它说明

/android/app/src/main/res 的作用是存放 Android 应用的资源文件。

Q2: React Native on Android: Cannot run program "node": error=2, No such file or directory

StackOverflow discussion

描述：使用Android studio打开Android项目抛出了上面的问题。
解决方案如下：

首先说下原因：android studio找不到node的执行路径，需要通过终端来启动。

如果使用Mac的话，可以执行下面的命令和步骤来启动。

2.1 在终端中输入下面的命令：

               1
               open -a /Applications/Android\ Studio.app

               COPY

2.2 同步Gradle

Q3: 在Android下TextInput中输入文字没有居中对齐问题

描述：在Android下TextInput中输入文字没有居中对齐，原因与Text文本不居中对齐一样，是Text的内边距导致的。
解决方案：

               1
2
3
4
               const styles = StyleSheet.create({
    includeFontPadding: false,
    textAlignVertical: 'center'
})

               COPY

网络相关

在国内，由于网络环境问题，在项目初始化后，执行yarn android命令时，编译进程因为包下载卡住无法进行，这时可以试下下面两种两种方案：

使用4/5G网络，小编亲测过联通4G网络，还不错，可以作为临时方案；
修改Gradle的Maven仓库地址为国内仓库，文件路径/[项目根目录]/android/build.gradle

               1
2
3
4
5
6
7
8
               allprojects {
    repositories {
        // ...
        google()
        // maven { url 'https://www.jitpack.io' }
        maven { url 'https://maven.aliyun.com/repository/public' }
    }
}

               COPY

补充：一些报错信息如，Could not resolve com.android.tools.build:gradlexxx...等

iOS

XCode相关

react-native-svg

github

问题背景

在iconfont 下载了一张SVG的图片，使用该库导入后发现出现警告：No stops in gradient。在RN项目中，图片是可以展示的，但是使用了渐变的图形并没有展示出来。 同时需要注意的是，SVG图片在Chrome 浏览器中正确显示的。

问题排查

首先，该问题在仓库的issues中是可以查到的，可以参考：https://github.com/react-native-svg/react-native-svg/issues?q=No+stops+in+gradient ，因为图片可以在浏览器中正确显示，大致可以判断是兼容问题或SVG的渐变的语法问题。更多细节可以查阅源码。

解决方案

这里提供小编的解决方案，仅供参考。

将SVG导入Sketch中，简单编辑后(需要编辑一下)，再次导出SVG格式，问题解决。

应用 | React Native：日常开发问题汇总

环境