概述
新接触 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 工程描述文件
启动应用
- 进到你的项目根目录,比如 cd AwesomeProject //AwesomeProject是项目名
- 在命令提示符输入: react-native start 启动服务
- 执行 react-native run-android 启动android ,稍等片刻就可以在Android模拟器里看到页面了