ReactNative►第一章：React入门

第1节：React开发环境搭建与运行

[TOC]

React

一、检测您是否具备了ReactNative的开发环境

1、环境已完善时

无

2、环境未完善时

2.1、React Native 环境搭建

  • 1、按照创建新的 React 应用进行环境搭建。

  • 安装方法：npm install create-react-app -g

  • 创建一个应用：create-react-app my-app

二、创建第一个ReactNative项目

1、创建项目

方法一：执行react-native init cj_rn_logindemo

此步骤会生成React Native依赖包node_modules文件夹。每个项目中都要有这部分内容。且该部分的内容可以直接被复制使用。所以，创建项目还有另一个方法。

生成的cj_rn_logindemo工程详见cj_rn_logindemo

方法二：原有iOS项目集成RN

参考来源：React Native 集成到原生项目(iOS)

react-native 指定版本创建项目

因为react-native更新太快，每次react-native init初始化项目的时候，都会安装最新的rn版本，导致之前的一些api不兼容等问题。
所以我们需要安装指定版本的rn来初始化项目：

1
react-native init demo --version 0.59.8
1
2
3
4
5
6
7
react-native 安装指定的版本

react-native init name --version 0.xx.xx

react-native 降低版本

react-native --save [react-native@0.xx.xx](mailto:react-native@0.xx.xx)

三、运行ReactNative项目

1、运行方法

1.1、常见运行方法

命令行运行项目

进入项目根目录cd TestRNProject

运行iOS项目react-native run-ios

1.2、像iOS原生那样在Xcode中运行

双击ios/TestRNProject.xcodeproj文件然后在Xcode中点击Run按钮。（最常用，对iOS开发者）

1.3、在WebStorm中直接运行

详见本文中的附一、进阶：为WebStorm搭建React Native开发环境

1.4、Android中找不到devices的问题处理

错误提示：error No Android devices connected.

rn_Android_device

此时需要：

①、adb kill-server

②、adb start-server

原因：模拟器在运行一段时间后，adb服务有可能会出现异常。这时需要重新对adb服务关闭和重启。

附：reload 命令adb shell input keyevent 82

2、运行项目的常见问题

2.1、RN项目报错“RCTBundleURLProvider.h” file not found

从网上下载别人的ReactNative项目，打开iOS项目的时候，xcode会报错，提示：“RCTBundleURLProvider.h” file not found

原因：node_modules文件夹不存在 或者 node_modules文件夹下的包和当前版本不匹配

解决方法：
1、打开Mac里面的终端，进入项目所在的文件夹目录；
2、把项目里面的 node_modules 文件夹删除掉，然后执行 npm install 命令
3、npm install安装完成后， 执行react-native upgrade命令
4、最后重新打开Xcode,clean一下，应该就没有问题了。

附一、进阶：为WebStorm搭建React Native开发环境

PS：最近又回来搞RN了，以下虽然都是一些老知识了，但你也许有用

问题背景：我不想在WebStorm/VSCode、终端、XCode中来回切换。我想在WebStorm直接运行ReactNative项目
问题背景：我不想在WebStorm/VSCode、终端、XCode中来回切换。我想在WebStorm直接运行ReactNative项目
问题背景：我不想在WebStorm/VSCode、终端、XCode中来回切换。我想在WebStorm直接运行ReactNative项目

1、为Run添加Add New Configuration

image-20190519205612140

点击，Edit configurations…会进入如下界面

image-20190519221955691

点击 + ，选择npm

image-20190519222125672

2、完善所添加的Configuration内容

外层内容填写如下：

image-20190519222852727

External tool内容如下：

image-20190519223454054

上述步骤2中的各值分别为：

  • ①Program：

    从which react-native中获得的 /usr/local/bin/react-native

    image-20190519223703388

  • ②Arguments：

    run-ios --simulator="iPhone Xʀ"

    run-ios --device="iPhone7_Qian"

    run-android --deviceId="emulator-5554"

附：启动和关闭ADB服务（adb start-server和adb kill-server）

iOS设备值来源：

设备_iOS

安卓设备值来源：

设备_adb devices

执行的命令有：

注：前提要cd到工程中后，执行react-native run-android --help才有效。

设备_react-native run-android --help

  • ③Working directory：

    建议通过如下图添加宏的方式添加Working directory值。

    image-20190519224816841

添加完成后的图为：

image-20190519225336448

至此，配置结束。接下来我们试下效果。

恭喜，配置结束，休息一下吧

3、试下配置效果是否有效

从Run菜单中选择刚才添加的执行项，其就会在执行我们所设置的选项，即执行/usr/local/bin/react-native run-ios "--simulator=iPhone Xʀ"。

执行结果如下：

image-20190519225942964

同样的其也会在终端中有如下显示：

image-20190519231236234

当然，如果你使用快捷键”Cmd+R”也能达到这个效果。

image-20190519231502977

经验证，配置无误，使用有效。

经验证，配置无误，使用有效，打工告成

四、Xcode11问题

2019.10.27: Could not find iPhone 11 simulator. Run CLI with –verbose flag for more details.

1、初步分析：

Xcode 11无法在模拟器上运行React-Native应用程序。看结论为没有你想运行的那个模拟器iPhone X。
2、判断分析正确否：

单独运行模拟器，在顶部菜单中，在“硬件，设备，iOS 13.0”下查看。

rn_Could not find simulator

①当您执行run-ios时，react-native旨在匹配请求的设备。内部硬编码默认值为iPhoneX。

②尝试匹配请求的设备的函数在：

/node_modules/@react-native-community/cli-platform-ios/build/commands/runIOS/findMatchingSimulator.js

设计此功能是为了使您可以为其提供设备和可选的版本号。

③如果找不到给定的设备和版本，则默认情况下它将使用列表中的第一个设备返回匹配项。

3、解决：

如上所述，首先自己运行模拟器，并记下所需的iPhone或iPad。

然后将此名称作为可选参数传递给run-ios命令行命令，如下所示：