React Native学习笔记(1) 环境配置，项目结构，开发环境结构

概述

新接触 React Native,本文算是个笔记

环境配置

• React Native中文网的环境配置 http://reactnative.cn/docs/0.27/getting-started.html
• 环境配置视频教程 http://v.youku.com/v_show/id_XMTQ4OTYyMjg4MA==.html

创建项目

环境配好后，就可以在命令行提示符下使用 react-native 指令了，下面是一些常用指令

创建项目

react-native init AwesomeProject   //AwesomeProject是项目名

启动 Node.js web server

react-native start

启动android

react-native run-android

启动ios

react-native run-ios

开发环境的组成

• 一个node.js 的开发服务器，在开发阶段，我们的电脑上需要开启这个web服务，以使得在模拟器中可以显示内容。当我们更改了js源代码后，也能及时的在模拟器里看到。
• 模拟器设备，就是我们开启的Android或者IOS虚拟机
• jsBundle 开发者写的源代码打包而成，在开发阶段更改js文件会自动更新到模拟器。而在发布最终版的，我们需要手动打包（离线包）这个jsBundle到apk或者IOS安装包内。网上还有一些“热更新”的方案。

开发环境的组成

项目结构

项目结构图

如上图所示，我们看看项目文件下都有什么

• android文件夹,这里是 android 工程的源代码，我们可以使用android studio 打开这个文件夹
• ios文件夹，这里是 iso的项目工程的源代码，可以用xcode打开 +node_modules ，是react-native工程用到的模块
• index.android.js 是android的 页面的内容，主源代码文件
• index.ios.js 是ios 的 页面的内容，主源代码文件
• package.json 工程描述文件

启动应用

1. 进到你的项目根目录，比如 cd AwesomeProject //AwesomeProject是项目名
2. 在命令提示符输入： react-native start 启动服务
3. 执行 react-native run-android 启动android ，稍等片刻就可以在Android模拟器里看到页面了