ReactNative 入门

简介

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>
    );
  }
}