RN 构建首个应用 发生的问题

iOS

  • CDN: trunk URL couldn't be downloaded
pod install
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
[!] CDN: trunk Repo update failed - 44 error(s):
CDN: trunk URL couldn't be downloaded: https://cdn.cocoapods.org/Specs/3/2/5/FlipperKit/0.11.1/FlipperKit.podspec.json, error: Net::OpenTimeout
...

A:
https://www.jianshu.com/p/6f53147e4409

Podfile中(首行)显示指定源
source 'https://github.com/CocoaPods/Specs.git'
  • [!] Error installing DoubleConversion
pod install
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing CocoaAsyncSocket (7.6.4)
Installing CocoaLibEvent (1.0.0)
Installing DoubleConversion (1.1.6)

[!] Error installing DoubleConversion
[!] /usr/bin/git clone https://github.com/google/double-conversion.git /var/folders/sf/kwbyjr2s6wq9t8709gzdj3xr0000gp/T/d20200703-81977-16us9f4 --template= --single-branch --depth 1 --branch v1.1.6

Cloning into '/var/folders/sf/kwbyjr2s6wq9t8709gzdj3xr0000gp/T/d20200703-81977-16us9f4'...
error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: unpack-objects failed

A:
https://www.jianshu.com/p/7b21254cbd77
作者的方式过于复杂,从评论区发现一个对我有效的方式(也是出自于作者,作者看来没少尝试):无脑重试下。

langkee
2019.12.27 16:58
多尝试几次,最近一段时间,cocoapods不稳定,这个我一些朋友也遇到,都是不断尝试,手动下载只是增加成功率。另外,如果还是不行,退出终端,电脑重启一下再试试,有时候可能有缓存影响。

Android

iOS成功运行proj后,试试terminal 运行 android

1、 error Failed to install the app. Make sure you have the Android development...

yarn android
yarn run v1.22.4
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 960 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
info Installing the app...

FAILURE: Build failed with an exception.

* What went wrong:
Could not initialize class org.codehaus.groovy.runtime.InvokerHelper

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 3s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Solution:
参考了🤚 https://www.e-learn.cn/topic/2636273 回答1

Open the android project(folder) in the Android Studio IDE.
All errors with your environment will show up

于是,使用Android Studio打开proj即可暴露。
果然有报错提示

Received close_notify during handshake

A:
https://blog.csdn.net/lxy1740/article/details/104606385/
在项目的build.gradle文件中将jcenter()换成阿里的源。

// jcenter()
maven{ url'http://maven.aliyun.com/nexus/content/groups/public/' }
maven{ url'http://maven.aliyun.com/nexus/content/repositories/jcenter'}

修改之后再重新Sync Project,见效了,几分钟提示ok。于是run到模拟器。然后build成功,并调起模拟器。

2、 E/wifi_forwarder: RemoteConnection failed to initialize: RemoteConnection failed to open pipe

LogCat中出现的标红部分:

2020-07-03 16:33:56.337 448-448/? E/wifi_forwarder: RemoteConnection failed to initialize: RemoteConnection failed to open pipe
2020-07-03 16:33:56.543 410-410/? E/netmgr: Failed to open QEMU pipe 'qemud:network': Invalid argument

找到个类似的,但 其实不是解决方案。
couldn't find DSO to load: libjscexecutor.so caused by: dlopen failed: library "libjsc.so" not found #25537

A:

yarn react-native start

这个有效,终端执行这句后,再使用Android Studio就可以成功运行到模拟器调试了,我曾经用了yarn android,正好那次失败了,所以 里面包括的yarn react-native start命令没有执行

后来一直用的Android Studio解决错误,在线调试就出问题了。

重新查看文档,发现确实有提醒 有坑


图片.png

终于,可以 ①用Android Studio 成功运行项目到模拟器 。以为一切迎刃而解,但。。。

3、无法通过Android Studio或命令行 运行到真机上,也无法使用命令行 正常启动项目在模拟器。

BUILD FAILED in 6s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7

对照文档https://reactnative.cn/docs/getting-started 查看,发现JDK版本必须是1.8(或称JDK8),晕!

图片.png

就是这个原因,我(曾经)装了最新的

$javac -version
javac 14.0.1

A:
再装一个吧,两个就两个jdk呗,下载安装jdk8后。需要设置好.bash_profile(环境变量)

# JDK1.8
export JAVA_8_HOME='/Library/Java/JavaVirtualMachines/jdk1.8.0_251.jdk/Contents/Home'
# JDK14
export JAVA_14_HOME='/Library/Java/JavaVirtualMachines/jdk-14.0.1.jdk/Contents/Home'
# react-native配置 限定是 JDK1.8
export JAVA_HOME=$JAVA_8_HOME

使得当前使用的jdk是1.8的,检查如下

$javac -version
javac 1.8.0_251

终于, ②命令行启动app到模拟器,success

图片.png

然后,③退出模拟器命令行启动app到真机,success
测试下热重装AOT,通过修改App.js修改内容 然后保存(cmd + S), 真机app内容立刻刷新,perfect!

最后,④Android Studio 启动app到真机,success

当然,还有挫折。当越过③ 尝试④时,一直失败。报错与本文Q2一样

448-448/? E/wifi_forwarder: RemoteConnection failed to initialize: RemoteConnection failed to open pipe
410-410/? E/netmgr: Failed to open QEMU pipe 'qemud:network': Invalid argument

(其实)当进行过一次③之后,以后执行④就没问题了。

至此,命令行、Android Studio模拟器、真机,两两组合调试 全都搞定,可以放心做后续的事情了。

4、在Android Studio里的Terminal,是无法成功运行app到模拟器/真机的,也是醉了。。。

BUILD FAILED in 969ms

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

然后,怀疑IDE里的terminal难道jdk版本和Mac的terminal 不一致?👇果然。。。

javac -version
javac 14.0.1

只需 重复在 Android Studio的terminal里 再执行下source ~/.bash_profile 即可

其它问题

端口被占用

这种情况,算是经常出现的吧。怪就怪 yarn有start 但没有stop命令,不知道咋stop的;所以有时 停止调试 却没法关掉8081的socket,当下次调试时就会发生出现问题。

yarn start

error listen EADDRINUSE: address already in use :::8081. Run CLI with --verbose flag for more details.
Error: listen EADDRINUSE: address already in use :::8081

强制kill掉

//查出PID,是19665
sudo lsof -i:8081
COMMAND   PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    19665   dl   24u  IPv6 0x6a20760fbf7c0ca9      0t0  TCP *:sunproxyadmin (LISTEN)
//kill掉 PID
sudo kill -9 19665