React Native是Facebook開源的一個(gè)移動(dòng)端開發(fā)框架。Facebook用js封裝了大量的原生控件，讓開發(fā)可以用React.js開發(fā)移動(dòng)端App。
我們可以在React中文網(wǎng)查看開發(fā)環(huán)境的搭建。
http://reactnative.cn/docs/0.44/getting-started.html#content
搭建完環(huán)境后，我們可以看到一個(gè)極簡的demo:
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello React</Text>
);
}
}
// 注意，這里用引號(hào)括起來的'HelloWorldApp'必須和你init創(chuàng)建的項(xiàng)目名一致
AppRegistry.registerComponent('HelloWorldDemo', () => HelloWorldApp);
我們先來分析一下，這一段代碼的結(jié)構(gòu)。
這一段代碼可以分為三部分：
- 依賴包引入：
- 引入的是React和Component基礎(chǔ)組件。
- 引入App注冊(cè)類和需要的UI組件（Text）。
- 創(chuàng)建一個(gè)React組件類，重載它的渲染方法：
- 返回一段類似H5的代碼。
- HelloWorldApp的render方法在調(diào)用時(shí)，會(huì)調(diào)用子控件(子Component）的render方法。
- 將第2步中創(chuàng)建的Component注冊(cè)到App中：
- 這里需要注意的是registerComponent第一個(gè)參數(shù)是需要注冊(cè)的原生App的項(xiàng)目名，第二個(gè)參數(shù)是在第2步中注冊(cè)的Component。
在環(huán)境配置完成后，再完成這三步，就可以運(yùn)行一個(gè)顯示"Hello React"的界面。
