[RN]一.windows搭建RN环境,创建dmeo运行（搭建RN环境没想象中的复杂）

[RN]一.windows搭建RN环境,创建dmeo运行（搭建RN环境没想象中的复杂）

 

参考http://blog.csdn.net/M075097/article/details/76551303

 

1.jdk配置就不说了；

2.android studio安装配置也不说了；

以上两项搜索较多，自行配置。

3.下载Note.js,安装时不用选择，直接“下一步”，完成；

4.react-native命令工具安装：

 

（需要说明一点的是，该处安装的react-native相当于node.js的一个插件，有了该react-native插件，才能1.初始化出一个带有支持RN组件的android Demo工程，2.该插件的作用还有当node.js服务启动后，当native端的APP发起JS的bundle请求时，检查服务端的js信息是否有更新，并打出native端所需的bundle传给native端）

 

安装方法：

（1）cmd管理工具执行:npm install -g react-native-cli 实现安装 ps:-cli前无空格

 

ps:出现以下错误信息，则上面的命令-cli前面加了空格，去掉空格重新执行命令即可：

 

Looks like you installed react-native globally, maybe you meant react-native-cli?To fix the issue, run:npm uninstall -g react-nativenpm install -g react-native-cli

 

（2）.验证是否安装成功可以输入 react-native -v 查看版本号如果可以即为安装成功如下：

 

5.使用react-native命令初始化RN工程

(1)进入要创建工程的目录（随意）命令行下执行 命令：react-native init FistDemo

(2)初始化完成后的目录结构如下：

 

• 此过程主要是初始化Android工程，简单说就是按照Android的工程结构创建一个Android的工程，和Android原生工程不同的是，该工程里面已经引入了RN组件，此处的RN组件指的是Android工程下的组件需要区分其与上面Node.js下安装的React-native不是一个概念
• 生成的目录中的android目录即为我们熟悉的Android下的工程目录，同样的IOS的对应于io目录
• 生成的目录中的index.android.js即为node.js需要解析的js文件，其对应js端的逻辑和布局，因为Demo工程较为简单，只对应有这一个js文件，里面内容是app中要显示的内容
• 生成目录中的package.json，该文件是node.js工程初始化之后的一个配置文件，由此可以看到，该目录目前是node.js工程和android工程的混合
• 生成目录中的node-modules该目录下是React开发对应此处React-native开发所需要的js端官方封装好的基础组件，我们能够直接使用一些Android中对应的js端组件就在于此处提供，相当于Anddoid工程下的系统API

 

6.打开android studio,打开的你项目，

 

可能会出现没有sdk版本，那就下吧

第一次打开android studio会有很多需要安装加载，那就安装吧,各种安装 完成后

 

编译JS

在项目目录下npm start

 

 

然后

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 

 

再一步：编译执行

react-native run-android

 

 

编译成功