RN笔记
一. 常用命令
- 比如我们希望查看RN的所有历史版本，可以在命令行中输入：
npm view react-native versions -json
- 创建工程并指定版本:
react-native init 工程名字 -source react-native@0.55.4 (无效)
react-native init 工程名字 --version 0.55.4
- 在项目中运行npm intall --save命令来执行安装react-native新版本：
npm install --save react-native@版本号
react-native run-ios --simulator "iPhone 7 Plus”
- 使用真机运行项目：（需要提前安装工具：npm i -g ios-deploy）
react-native run-ios --device "'YooHoh's iPhone X"
- 查看当前可用的所有设备/模拟器列表:
xcrun simctl list devices
- 链接库
react-native link
二、iOS端build 遇到的报错
- 报错1：
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=22):
Failed to install the requested application
The bundle identifier of the application could not be determined.
Ensure that the application's Info.plist contains a value for CFBundleIdentifier.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/travelProject.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
尝试方案：
基本思路： 先确保依赖包没问题，可以手动下载替换， 确保依赖包完整后， 清缓存，npm重新安装依赖
清项目依赖包， 也可以手动删除
node_modules文件夹下内容
cd node_modules/react-native/third-party/glog-0.3.4
../../scripts/ios-configure-glog.sh
mac环境下，在命令行中run-ios构建时报错：CFBundleIdentifier", Does Not Exist
打开XCode，进入.xcodeproj文件，运行，编译时报错:'boost/iterator/iterator_adaptor.hpp' file not found’
经过多次测试，这个问题只在react native 0.45.0及以后的版本中出现。
在网上找到解决方法如下：
这个问题产生原因：
/Users/你的用户名/.rncache中boost_1_63_0.tar.gz，double-conversion-1.1.5.tar.gz，folly-2016.09.26.00.tar.gz，glog-0.3.4.tar.gz文件不完整。或者node_modules/react-native/third-party 文件不完整。
具体操作：
1、删除/user/你的用户名/.rncache目录下的boost_1_63_0。重新下载,下载网址http://www.boost.org/users/history/version_1_63_0.html
2、打开命令行工具，在项目目录下输入rm -rf node_modules && rm -rf ~/.rncache && yarn
3、npm install
4、react-native upgrade
- 报错2：
Libtool /Users/Shen/Desktop/travel/travelProject/ios/build/Build/Products/Debug-iphonesimulator/libRCTWebSocket.a normal x86_64 (1 failure)
根据提示去路径里看了下，唯独缺少
libRCTWebSocket.a静态库， 打开Xcode工程在Lib中找到RCTWebSocket项目，在Link Binary With Libraries下看到libfishhook.a图标状态有点虚，移除重新导入，再次执行react-native run-ios解决。
- 报错3：
'config.h' file not found
我通过备份项目，进到了路径
Macintosh HD ▸ 用户 ▸ Shen ▸ 桌面 ▸ GYYX ▸ travel ▸ travelProject ▸ node_modules ▸ react-native ▸ third-party ▸ glog-0.3.4比对，出问题的项目的确是缺少错误中的文件，会有一个config.h.in文件，起初我通过另外正常项目将文件复制了一份，但是又出现了其他文件缺失的问题
- 报错4：
make sure you're running a packager server or have included a .jsbundle file in your application bundle
- 删除build文件夹
- 关闭VPN
- 删除node_modules/third-party文件夹
- 报错4:
React Native version mismatch
2019.01.07
三、Android端环境配置
- 打开Android Studio 报错
Unable to access Android SDK add-on list
原因： 检测到电脑没有SDK, 通过AS管理SDK勾选安装后，配置环境变量
vi ~/.bash_profile
> 通过SD管理SDK安装JDK等资源，可以通过AS看到安装路径
>```
export ANDROID_HOME=~/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
//本机新账号下默认没有.bash_profile，按照视频讲解在补充上面两个环境后也加上了
export ANDROID_SDK=$ANDROID_HOME
export ANDROID_NDK=/usr/local/Cellar/android-ndk-r10e/r10c
使配置生效或者重启电脑
source ~/.bash_profile
> 检查配置是否生效
>```
echo $Android/sdk
- 配置好路径后， 直接
react-native run-android，下载一些依赖包后报错
FAILURE: Build failed with an exception.
- What went wrong:
Execution failed for task ':app:installDebug'.
com.android.builder.testing.api.DeviceException: No connected devices!
> 原因：
> iOS通过__run-android__会自动启动模拟器，Android运行__run-android__不会自动启动模拟器
> 出现这一行，表示环境已经OK， 下一步需要启动模拟器或连接设备
- 下面的报错信息是一个一般性的提示信息，任何报错都可能会出现这段描述
>```
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
-
接下来就是通过AS打开工程，创建一个模拟器，并启动模拟器，然后再通过 react-native run-android 启动android项目
-
SDK版本问题
- What went wrong:
A problem occurred configuring project ':app'.
Could not resolve all dependencies for configuration ':app:_debugApk'.
A problem occurred configuring project ':react-native-webview-bridge-updated'.
The SDK Build Tools revision (23.0.1) is too low for project ':react-native-webview-bridge-updated'. Minimum required is 25.0.0
>去路径 `Macintosh HD ▸ 用户 ▸ Shen ▸ 桌面 ▸ GYYX ▸ travel ▸ travelProject ▸ node_modules ▸ react-native-webview-bridge-updated`下找到`package.json`，将版本修改为要求的版本
保存后重新执行run，可能会有多个文件提示版本问题，根据提示进行修改
- NDK is missing a "platforms" directory
> -[RN项目报错：NDK is missing a "platforms" directory.，解决方法](https://blog.csdn.net/qq_28325423/article/details/80636310)
- No toolchains found in the NDK toolchains folder for ABI with prefix
> -[No toolchains found in the NDK toolchains folder for ABI with prefix](https://www.jianshu.com/p/fd3d49c7f1f8)
- Could not find method implementation() for arguments...
>```
* What went wrong:
A problem occurred evaluating project ':react-native-fast-image'.
> Could not find method implementation() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
打开build.gradle文件， 将implementation替换成compile
2019.01.08
四、相关资料：
-
^和~区别:
波浪符号（~）：他会更新到当前minor version（也就是中间的那位数字）中最新的版本。 放到我们的例子中就是：body-parser:~1.15.2，这个库会去匹配更新到1.15.x的最新版本， 如果出了一个新的版本为1.16.0，则不会自动升级。 波浪符号是曾经npm安装时候的默认符号，现在已经变为了插入符号。
插入符号（^）：这个符号就显得非常的灵活了，他将会把当前库的版本更新到当前major version
（也就是第一位数字）中最新的版本。
放到我们的例子中就是：bluebird:^3.3.4，这个库会去匹配3.x.x中最新的版本，
但是他不会自动更新到4.0.0。
- [关于npm audit fix](https://blog.csdn.net/weixin_40817115/article/details/81007774)
- [NPM install -save 和 -save-dev](https://www.cnblogs.com/limitcode/p/7906447.html)
>```
npm install moduleName # 安装模块到项目目录下
npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。
npm install -save moduleName # -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
网友评论