下面采用的是基于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)”
2.用 homebrew 安装nodejs (rn 需要nodejs4.0或以上的版本做环境)
brew install node
3.rn 命令行工具 react-native-cli(用于创建,初始化,更新,运行和打包项目等)
npm install -g react-native-cli
4.安装xcode(命令行,git..)
//推荐安装的工具
1.watchman (监视文件系统变更,快速刷新界面,提高开发性能)
brew install watchman
2.flow(flow 语法检查)
brew install flow
3.nuclide(facebook 提供的基于atom的编写rn的IDE)
推荐用webstorm 或 sublime text.
//运行 rn 自带示例
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios//也可以在xcode 中运行
//修改示例
编辑 index.ios.js 并在仿真器上command + r刷新
///真机测试/xcode 7 后不需要账号
AwesomeApp/ios/AwesomeApp/AppDelegate.m
中的localhost 修改为nodejs 服务器的ip地址———————-
真机运行app,会自动将javascript/图片打包到app内部
打开AwesomeApp/ios/AwesomeApp/AppDelegate.m
取消注释jsCodeLocation = [[NSBundle mainBundle]—————这一行。
notice: NSAllowsArbitraryLoads 安全http协议的权限————-
///////////// index.ios/android.js //////////////////////////////////////////
//引入RN内部模块
import React,{Component} from ‘react’;
import {AppRegistry,Text} from ‘react-native’;
//import,from,class,extends ()=>来自es6 语法,
class HelloWorldApp extends Component{
render(){
return (
Hello World
);
}
}
//定义并注册组件HelloWorldApp
AppRegistry.registerComponent(‘HelloWorldApp’,()=>HelloWorldApp);
RN 入门基础:
#
props 分为内部和外部属性
内部属性
{}中包含的是js变量或表达式
外部属性
//使用标签的时候可以直接在标签中加属性和值
this.props.pro1 这种方式可以在组件内部取属性值
组件为容器组件,用来布局
//组件可以相互组合成一个新的组件
return (
);
#
动态显示界面—状态
props一旦指定在组件生命周期中不会变化
state 用于需要改变的数据,用于变化的数据
来动态的刷新界面,需要在constructor中初始化
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>);
}
}//redux 统一管理数据流
#
样式:标签style 属性 javascript 样式驼峰写法
集中管理组件的样式
const styles = StyleSheet.create({
bigblue:{
color:’blue’,
fontWeight:’bold’,
fontSize:30
},
red:{color:’red’}
});
render(){
return (
xxxx
//数组中后申明的属性会覆盖先声明的同名属性
);
}
#
如何控制组件的尺寸
RN中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点
在不同尺寸的屏幕上显示一样的大小
flex 宽高
如果父容器width和height不确定,也没有设置flex则尺寸为0,里面
的子组件都无法显示
#
flexbox 布局
style属性可以设置
flexDirection,alignItems,justifyContent
////////////
React Native中的Flexbox的工作原理和
web上的CSS基本一致，当然也存在少许差异。
首先是默认值不同：flexDirection的默认值
是column而不是row，
alignItems的默认值是stretch而不是flex-start，
以及flex只能指定一个数字值。
#
用户输入(事件处理) 处理事件用闭包的方式
render(){
return(
#
ScrollView(适合显示数量不多的组件,所有组件都会渲染)
//这个有点小复杂
ListView(适合显示数量多的组件,可绑定数据源,元素可删除,渲染优化)
#
网络//居然用到了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来简化代码
async search(){
try{
let response = await fetch(xxxxxxxxx);//fetch 返回的是一个响应,响应携带返回的数据
let responseJson = await response.json();
}
catch(error){
console.error(error);
}
}
//其它方式XMLHTTPRequest,ajax…..也可以
//swift 中的in 和 => 还不一样
({() in
})
//大括号写在=>后面
(()=>{
})
支持WebSocket
var ws = new WebSocket(‘ws://xxx.com/abc);
ws.onopen = ()=>{
ws.send(“send a message”);
};
ws.onmessage = (m) => {
console.log(m.xxx);
};
ws.onerror = (e) =>{
console.error(e.message);
};
ws.onclose = (m) =>{
console.log(m.code,m.reason);
};
#
实用导航器跳转页面
[view stack]
在组件class 前面加export default 就可以让
此组件通过import Name from ./Name的方式在外部使用
还可以用类属性.defaultProps = {xxx:yyy}设置默认值
navigator.push({ //标题 + 索引
title:’Next Scene Title’,
index:1
});
navigator.pop();
//PropTypes.array
React.PropTypes.array 用于类型校验
#
常见的几个全局变量:
this.props 用于管理视图属性(包括事件属性)
this.state 用于管理视图状态
defaultProps 用于定义模式属性
StyleSheet 用于管理样式
PropTypes 用于数据校验
navigator 用于手机视图之间的导航
AppRegistry 用于注册一个组件