React-Native入门(文档http://reactnative.cn/docs/getting-started.html#content):
一、React-Native 环境配置:
1.参考文档:http://www.csdn.net/article/2015-09-24/2825787-react-native;2.安装三个东西:node(4.0以上)/watchman/flow
安装node命令:brew install node安装watchman命令: brew install watchman安装flow命令: brew install flow
3.安装react-native命令: npm install -g react-native-cli
iOS端:1.安装Xcode7.0或更高版本
android端:1.安装最新版的JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html;
2.安装Android-sdk:brew install android-sdk或者通过其它方式;
3.配置ANDROID_HOME环境变量:
Mac,往你的~/.bashrc,~/.bash_profile 或者你终端所用的其它配置文件中增加以下内容:
# 如果你是通过Homebrew安装SDK的,则加入下列路
径
export ANDROID_HOME=/usr/local/opt/android-sdk# 否则可能是(当然具体视你把SDK放在哪):export ANDROID_HOME=~/Library/Android/sdk
4.打开sdk manager,install以下条目:
5.安装genymotion模拟器6.安装androidStudio
二、初始化RN项目:
1.打开终端进入到你想放置RN项目的目录,执行命令:react-native init 项目名,此时会进入下载react-native的node-modules包,会等很久;所以有个方法跳过此步骤:
1.打开终端,执行:open /usr/local/lib/node_modules/react-native-cli/index.js
3.再执行命令:react-native init 项目名,此时会报错:Error: Cannot find module;因为少了react-native的node-modules包,可以从百宝箱下载这个包放到项目名的目
录下:
index.ios.bundle"];
2)android端(需要下载gradle2.4和一些依赖,公司的网络不行):
1.(这种只需要一个模拟器)终端进入到项目的目录下,执行react-native run-android,在下载完依赖包后可以运行在模拟器上;
2.终端进入RN目录运行react-native start,通过androidstudio打开android项目,运行就可以;
3.真机调试时无法连接到debug server:1)5.0或以上机型,通过adb反向代理端又:adb reversetcp:8081 tcp:8081,再打开服务。
2) 5.0 以下机器,应用安装到测试机上之后,摇动设备,在弹出菜单中选择 Dev Setting > Debug Server hostfor device,然后填入 Mac 的 IP 地址(ifconfig 命令可查看本机 IP)
三、进行RN开发:
1.组件思想:1)创建组件:
var React = require(‘react-native’);
var component = React.createClass({});
2)组件的生命周期:当通过调用React.createClass( ) 来创建组件的时候,应该提供一个包含 render 方法的对象,并且也可以包含其它的生命周期
方法。
3)组件的props和state:props:指的是组件的属性,是一个对象。可用
于组件之间的数据传递。state:是组件的状态,当state发生变化时组件
会重新渲染。this.state.key-value;4)常用组件:view/text/listview/
touchableHighlight等
2. JSX:类似于html,不同点在于JSX可以执行js。JSX在render函数中编辑,长得像一颗组件树。render函数中只能渲染一个根组件。
3.flex布局:可以参考http://139.196.14.76/t/react-native-flex/181
Flex布局与Android的线性布局(LinearLayout)有点类似,都可以设置布局方向,对齐方式,以及项目的布局占位权重。flex布局中容器默认有两个轴:主轴(水平)和交叉轴(垂直);项目(组件)默认是沿交叉轴排布。
