React Native框架介绍

一、环境搭建

       1. 安装node.js,并配置环境变量(node -v)

       2. 安装npm，（node.js集成了npm,无需安装，npm -v）

       3. 安装python,并配置环境变量(python -v)

       4. 安装react native命令行工具： npm install -g react-native-cli

       5. 安装webstorm

       配置pathon环境变量如下图：



  其他环境变量设置如下图：

二、创建工程

      1. 创建react-native android项目：react-native init MyProject

      2. 启动react-native服务:在项目文件夹下 react-native start

      3. react-native run-android（cmd管理员权限,真机上运行设置Dev Settings）

      注意事项：在真机上运行工程，会出现以下错误：



4000

解决办法：手机摇一摇，或者通过系统菜单，打开调试菜单，如下图：



 
点击最后一项：Dev Settings，如下图所示，配置上本机的ip地址和端口号，端口号固定为8081。然后点击确定，打开上图的调试菜单，点击Reload JS即可。

三、React Native组件生命周期

详细介绍地址：http://www.race604.com/react-native-component-lifecycle/

四、其他资料

1. React Native官方网站

      （1） react native英文官网：   https://facebook.github.io/react-native/docs
      （2） react native中文官网：http://reactnative.cn/docs/0.47/getting-started.html

2. ES6语法

       （1）阮一峰ES6简介： http://es6.ruanyifeng.com/#docs/intro

      （2）React/React Native的ES5与ES6语法对照表：http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8/4

3. Flex布局

阮一峰Flex布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html