下面采用的是基于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 用于注册一个组件
