简介
1.跨平台,可以把iOS,android原声组建整合到RN。
2.在JS代码和原生平台之间的操作都是异步执行的。流畅,反应灵敏。
3.触摸事件处理强大。
4.弹性盒(Flex box:css:混合表格)和样式。
5.兼容通用标准:吸取web中生态系统中的通用标准,API提供兼容层。
6.扩展性。
安装
Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
显示Installation successful!,输入brew测试检验安装成功。
Node
使用Homebrew来安装Node.js.
brew install node
设置npm镜像加速
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Yarn,RN命令行工具
加速node模块下载
npm install -g yarn react-native-cli
设置yarn镜像
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Xcode
App Store下载
推荐安装
Watchman
brew install watchman
Flow
静态的JS类型检查工具,可不安装。
Nuclide
测试安装
react-native init AwesomeProject //初始化项目,项目名
cd AwesomeProject // 切换到项目目录下
react-native run-ios //运行在iOS设备上
react-native run-android //运行在android设备上
会打开Xcode模拟器。。。没成功
遇到问题
1.重新运行:使用AS运行代码,爆红 使用终端命令行工具cd进入到项目的根目录中,执行react-native start
2.端口占用:查找8081被占用的进程,kill
lsof -n -i4TCP:8081 列出被占用的端口列表
kill -9 pid; 找到与之对应的PID然后删除即可
Application AFirstDemo has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerConponent
3.JS文件中return()返回的是样式,返回多个控件时需要定义;
4.JS文件修改后调试 http://blog.csdn.net/wds1181977/article/details/53418219
生命周期
getDefaultProps:组件创建之前调用,全局调用一次
getInitialState:初始化组件状态
componentWillMount:在执行了初始化后,在第一次绘制render()之前。在这进行业务初始化的操作,或设置组件的状态,在生命周期中之调用一次。
componentDidMount:虚拟 DOM 已经构建完成,可以进行获取元素或者子组件操作,进行JS交互,发起网络请求。先调用子组件的该方法,在调用父组件的。只调用一次,这个函数之后,就进入了稳定运行状态,等待事件触发。
componentWillReceiveProps(object nextProps):如果数组收到新的属性,调用该方法。不会处罚额外的rendered()。
boolean shouldComponentUpdate(object nextProps, object nextState):是否更新。组件收到新属性和状态改变触发。返回值决定是否更新,true—>更新流程;否则不更新,进入等待状态。
componentWillUpdate(object nextProps, object nextState):更新操作。如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(…) 返回为 true,就会开始准更新组件,调用该方法。做更新界面之前要做的操作,不能使用this.setState 来修改状态。把参数设置给修改的组件,调用render()更新界面。
componentDidUpdate(object nextProps, object nextState):得到通知,更新完成。
componentWillUnmount():移除组件时的相关操作。取消计时器,网络请求等。
生命周期 调用次数 能否使用 setSate()
getDefaultProps 1(全局调用一次) 否
getInitialState 1 否
componentWillMount 1 是
render >=1 否
componentDidMount 1 是
componentWillReceiveProps >=0 是
shouldComponentUpdate >=0 否
componentWillUpdate >=0 否
componentDidUpdate >=0 否
componentWillUnmount 1 否
属性 props
this.props.属性名
慢慢领悟吧。。。
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
//主类
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}