React-Native学习笔记

2019-01-20 本文已影响47人 ShenYj

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@版本号

ReactNative用指定的真机/模拟器运行项目

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

react-native常用操作指令

二、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重新安装依赖

关于Entry, ":CFBundleIdentifier", Does Not Exist的解决方法

清项目依赖包，也可以手动删除node_modules文件夹下内容

cd node_modules/react-native/third-party/glog-0.3.4
../../scripts/ios-configure-glog.sh

解决CFBundleIdentifier", Does Not Exist

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)

Xcode 10 libfishhook.a cannot be found

根据提示去路径里看了下，唯独缺少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文件，起初我通过另外正常项目将文件复制了一份，但是又出现了其他文件缺失的问题

third-party: 'config.h' file not found 解决方案

报错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

React Native version mismatch 错误

2019.01.07

Props(属性)

自定义组件

State(状态)

样式

高度与宽度（指定宽高和弹性宽高）

Flexbox布局（Flex Direction、Justify Content和Align Items)

三、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

处理文本输入

处理触摸事件

使用滚动视图

使用长列表

网络

四、相关资料：

npm package.json属性详解
^和~区别:

波浪符号（~）：他会更新到当前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节点写入依赖。