ReactNative

---

更多文章：走进ReactNative的世界(1)

---

React Native的安装及项目创建、运行

1.遗留问题解决

在走进ReactNative的世界(1)中存在一些问题，我后来自己摸索的时候加以修正了，总结如下：

• 注意：安装时不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！
• 安装node.js之后，可以设置镜像源，方便后面安装加速。(你懂的)

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

---

2.安装Yarn、React Native命令行工具 --react-native-cli

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

//在cmd中执行命令
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

3.配置SDK和环境变量

我们可以使用Android Studio 2.0及以上的版本来下载SDK，
参见React Native 中文网里面写的比较详细，这里有点需要注意的是：
** adb的环境变量和SDK环境变量的设置不能共用**

//SDK的环境变量
ANDROID_HOME
E:\android_studio_tool\Android\sdk

//adb的环境变量
ADB_HOME
E:\android_studio_tool\Android\sdk\platform-tools
E:\android_studio_tool\Android\sdk\tools

4.新建项目并运行

在cmd中使用命令行来新建项目，项目会新建在cmd所在的目录，所以你可以先cd到指定目录再创建项目

//创建名为：HellowReactNative的项目
react-native init HellowReactNative
//要进入到项目里面
cd HellowReactNative
//执行运行命令，将项目发布到实现启动的模拟器或者手机
react-native run-android  或 react-native run-ios

如果执行成功，你会看到下图的效果，并且手机上也会运行起来。

• 进入项目，并执行运行命令

run-rn-pro.png

• 运行成功

  
  rn-run-success.png
  

  *在手机上的效果(我是用的AS的模拟器)

rn-on-phone.png

完美运行！
大家可以看到上面手机中多了几个中文——欢迎来到RN的世界！！！
原本新建的项目是没有的，因为我修改了一下项目中的 index.android.js 文件，

• 1.使用Webstorm导入项目，修改index.android.js文件

rn-pro-update.png

• 2.双击 ** 键盘-R** 或者打开Menu键打开开发者菜单，选择 Reload JS ，就会重新加载出你修改的内容，不需要再次使用 react-native run-android 命令发布项目。

---

从写完这两篇文章，我总结了一下，React Native从0到1的大致过程：

• 安装node.js并设置镜像源
• 安装WebStorm及其补丁文件
• 安装Yarn并设置镜像源
• 配置SDK环境变量
• 新建项目并运行

---

以上内容如有错误，烦请指出，定当及时修改--React Native小白一枚