React-Native入门

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

2.在打开的文件中注释掉以下内容:

3.再执行命令:react-native init 项目名,此时会报错:Error: Cannot find module;因为少了react-native的node-modules包,可以从百宝箱下载这个包放到项目名的目

录下:

注:百宝箱地址:http://10.20.18.148/desktop/index.php?user/login

用户名:anydoor;密码: anydoor123;可以用搜索功能找到node_modules;

4.在项目的上级目录下执行:react-native init 项目名,选择y,项目就可以生成了。

5.运行项目:1)iOS端直接打开iOS目录下的工程;iOS 真机调

试也简单,修改HTTP地址即可:jsCodeLocation =[NSURL URLWithString:@"http://localhost:8081/

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布局中容器默认有两个轴:主轴(水平)和交叉轴(垂直);项目(组件)默认是沿交叉轴排布。