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

来源:互联网 发布:网络女主播唱的男人花 编辑:程序博客网 时间:2024/05/16 02:29
[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



编译成功






原创粉丝点击