@H_301_1@下面采用的是基于ES 6的写法,ES6之前没有extends class 这些关键字
1.安装包管理器 HomeBrew
sudo chown -R ‘whoami’ /usr/local
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

@H_301_1@2.用 homebrew 安装nodejs (rn 需要nodejs4.0或以上的版本做环境)
brew install node

@H_301_1@3.rn 命令行工具 react-native-cli(用于创建,初始化,更新,运行和打包项目等)
npm install -g react-native-cli

@H_301_1@4.安装xcode(命令行,git..)

@H_301_1@//推荐安装的工具
1.watchman (监视文件系统变更,快速刷新界面,提高开发性能)
brew install watchman

@H_301_1@2.flow(flow 语法检查)
brew install flow

@H_301_1@3.nuclide(facebook 提供的基于atom的编写rn的IDE)
推荐用webstorm 或 sublime text.

@H_301_1@//运行 rn 自带示例
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios//也可以在xcode 中运行

@H_301_1@//修改示例
编辑 index.ios.js 并在仿真器上command + r刷新

@H_301_1@///真机测试/xcode 7 后不需要账号
AwesomeApp/ios/AwesomeApp/AppDelegate.m
中的localhost 修改为nodejs 服务器的ip地址———————-

@H_301_1@真机运行app,会自动将javascript/图片打包到app内部

@H_301_1@打开AwesomeApp/ios/AwesomeApp/AppDelegate.m
取消注释jsCodeLocation = [[NSBundle mainBundle]—————这一行。

@H_301_1@notice: NSAllowsArbitraryLoads 安全http协议的权限————-

@H_301_1@///////////// index.ios/android.js //////////////////////////////////////////
//引入RN内部模块
import React,{Component} from ‘react’;
import {AppRegistry,Text} from ‘react-native’;

@H_301_1@//import,from,class,extends ()=>来自es6 语法,

@H_301_1@class HelloWorldApp extends Component{
render(){
return (
Hello World
);
}
}

@H_301_1@//定义并注册组件HelloWorldApp
AppRegistry.registerComponent(‘HelloWorldApp’,()=>HelloWorldApp);

@H_301_1@RN 入门基础:

#

@H_301_1@props 分为内部和外部属性
内部属性
{}中包含的是js变量或表达式

@H_301_1@外部属性
//使用标签的时候可以直接在标签中加属性和值
this.props.pro1 这种方式可以在组件内部取属性值

@H_301_1@组件为容器组件,用来布局

@H_301_1@//组件可以相互组合成一个新的组件
return (




);

#

@H_301_1@动态显示界面—状态
props一旦指定在组件生命周期中不会变化
state 用于需要改变的数据,用于变化的数据
来动态的刷新界面,需要在constructor中初始化

@H_301_1@class Blink extends Component{
constructor(props){
//初始化值
this.state = {name:value}

//state 更像一个调控开关,控制UI的显示
 //改变状态值
 this.setState({name:newValue});

}

render(){
   let show = this.state.name //....

   return (<Text>{show}</Text>);
}

@H_301_1@}//redux 统一管理数据流

#

@H_301_1@样式:标签style 属性 javascript 样式驼峰写法

@H_301_1@集中管理组件的样式

@H_301_1@const styles = StyleSheet.create({
bigblue:{
color:’blue’,
fontWeight:’bold’,
fontSize:30
},

@H_301_1@red:{color:’red’}

@H_301_1@});

@H_301_1@render(){

@H_301_1@return (

xxxx
//数组中后申明的属性会覆盖先声明的同名属性


);
}

#

@H_301_1@如何控制组件的尺寸
RN中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点
在不同尺寸的屏幕上显示一样的大小

@H_301_1@flex 宽高
如果父容器width和height不确定,也没有设置flex则尺寸为0,里面
的子组件都无法显示

#

@H_301_1@flexBox 布局
style属性可以设置
flexDirection,alignItems,justifyContent
////////////
React Native中的FlexBox的工作原理和
web上的CSS基本一致，当然也存在少许差异。
首先是默认值不同：flexDirection的默认值
是column而不是row，
alignItems的默认值是stretch而不是flex-start，
以及flex只能指定一个数字值。

#

@H_301_1@用户输入(事件处理) 处理事件用闭包的方式

@H_301_1@render(){
return(

#

@H_301_1@ScrollView(适合显示数量不多的组件,所有组件都会渲染)

@H_301_1@//这个有点小复杂
ListView(适合显示数量多的组件,可绑定数据源,元素可删除,渲染优化)

#

@H_301_1@网络//居然用到了promise,这太好了
search(){
return fetch(‘www.abc.com/xxx.json’,{
method:’POST’,
headers:{
‘Accept’:’application/json’,
‘Content-Type’:’application/json’
},
//JSON.stringify()用于把别的对象转换为json 对象,object跟json不同
body:JSON.stringify({
firstParam:’yourValue’,
secondParam:’yourOtherValue’
})
})
.then((response) => response.json())//response.json()//返回json对象
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
//ES7 可以用async await来简化代码

@H_301_1@async search(){
try{
let response = await fetch(xxxxxxxxx);//fetch 返回的是一个响应,响应携带返回的数据
let responseJson = await response.json();
}
catch(error){
console.error(error);
}
}

@H_301_1@//其它方式XMLHTTPRequest,ajax…..也可以

@H_301_1@//swift 中的in 和 => 还不一样

@H_301_1@({() in

@H_301_1@})
//大括号写在=>后面
(()=>{

@H_301_1@})

@H_301_1@支持WebSocket

@H_301_1@var ws = new WebSocket(‘ws://xxx.com/abc);

@H_301_1@ws.onopen = ()=>{
ws.send(“send a message”);
};

@H_301_1@ws.onmessage = (m) => {
console.log(m.xxx);
};

@H_301_1@ws.onerror = (e) =>{
console.error(e.message);
};

@H_301_1@ws.onclose = (m) =>{
console.log(m.code,m.reason);
};

#

@H_301_1@实用导航器@R_304_404@面
[view stack]

@H_301_1@在组件class 前面加export default 就可以让
此组件通过import Name from ./Name的方式在外部使用
还可以用类属性.defaultProps = {xxx:yyy}设置默认值

@H_301_1@navigator.push({ //标题 + 索引
title:’Next Scene Title’,
index:1
});

@H_301_1@navigator.pop();

@H_301_1@//PropTypes.array
React.PropTypes.array 用于类型校验

---

#

@H_301_1@常见的几个全局变量: this.props 用于管理视图属性(包括事件属性) this.state 用于管理视图状态 defaultProps 用于定义模式属性 StyleSheet 用于管理样式 PropTypes 用于数据校验 navigator 用于手机视图之间的导航 AppRegistry 用于注册一个组件