概述
新接触 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模拟器里看到页面了
网友评论