react native开发

原 reactreact native读完大概需要8分钟

发布时间：2018-08-19 23:35 星期日
刘伟波
780
更新于： 2018-09-12 19:53 星期三

一环境配置

源文档 https://reactnative.cn/docs/getting-started/

window环境配置

暂时用的window后面可以补上ios

安装依赖

Node,
Python2
JDK

注意 Node的版本必须高于 8.3，Python 的版本必须为 2.x（不支持 3.x），而 JDK的版本必须是 1.8（不支持 1.9）。

npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Android 开发环境

安装 Android Studio
确保选中了以下几项：

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

安装 Android SDK
Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native应用需要的是Android 8.0 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在Android Studio的欢迎界面中找到SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 8.0 (Oreo)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

Android SDK Platform 26
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了React Native 所必须的26.0.3版本。你可以同时安装多个其他版本，然后还要勾选最底部的Android Support Repository。

最后点击"Apply"来下载和安装这些组件。

配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK所在的目录（具体的路径可能和下图不一致，请自行确认）：

SDK 默认是安装在下面的目录：

c:Users你的用户名AppDataLocalAndroidSdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

创建新项目

这里就不用官方文档提供的init方法，因为比较坑，会出现很多红屏，很多错误，对于初学者，不友好，折腾了几天，没搞出来，经过查阅原始faccebook官方文档 https://facebook.github.io/react-native/docs/getting-started.html，这里国内用户要翻墙。

create-react-native-app，简称CRNA，用来快速创建react native的app。

npm install -g create-react-native-app
create-react-native-app AwesomeProject

cd AwesomeProject
npm start

这里是官方提供的脚手架，还是很方便，跳过一万种环境错误红屏。

npm start命令能让你的 RN app运行在开发模式中。你可以在你的 ios 或 android手机中下载expo的app，然后在 expo中可以通过局域网实时查看RN 应用！这中方法比模拟器方便许多，而且不需要连接电脑哟。你的团队成员都可以实时预览，非常方便。

expo的相关工具和预览app在这里
https://expo.io/, 下载地址页面https://expo.io/tools,下载地址https://expo.io/tools,有可能网速比较慢，要耐心等待。下载完成后传给手机，手机安装后就可以扫码，愉快的打开react native app了。

我们进入CRNA创建的项目，npm start运行，可以看到出现一个硕大的二维码。