前言

• 新手打算从零开始学习面书的ReactNative。
• 原本打算学习Java进行Android开发，但看到ReactNative应用开发的颠覆性，以及本身做过少量前端开发，因此决定提前入坑。
• 环境搭建此处略过，请至官网了解。
• 在次说明，本人学习能力较弱，因此决定做官方文档的搬运工。

常用组件

Text 组件。用于显示文本。

import React from 'react';          //导入react
import  { AppRegistry,Text } from 'react-native';    //导入Text,在此导入组件

const App = () => {
return (       
     <Text>Hello World!</Text>
   );
}

AppRegistry.registerComponent('MyApp', () => App);  //注册应用之后才能正确渲染，且应用作为整体只注册一次

Image 组件。用于显示图片。

import React from 'react';          //导入react
import  { AppRegistry,Image} from 'react-native';    //导入Image

const App = () => {
return (       
     <Image source={require('./img/check.png')} /> //<image> 相当于网站中 <img> 标签
   );
}

AppRegistry.registerComponent('MyApp', () => App);  //注册应用之后才能正确渲染，且应用作为整体只注册一次

View 组件。基础容器。

import React from 'react';          //导入react
import  { AppRegistry,View,Image} from 'react-native';    //导入Image,View

const App = () => {
return (       
      <View style={{alignItems:'center'}}> //<View>相当于网站中的 <div>标签，因此对于其他组件应包装在View中来进行样式和布局的控制
       <Image source={require('./img/check.png')} /> //当前目录，<image> 相当于网站中 <img> 标签
      </View>
   );
}

AppRegistry.registerComponent('MyApp', () => App);  //注册应用之后才能正确渲染，且应用作为整体只注册一次

对于样式布局的操作与Html非常类似。

TextInput 组件。用于文本输入。

import React from 'react';          //导入react
import  { AppRegistry,View,TextInput} from 'react-native';    //导入TextInput,View

const App = () => {
return (       
      <View> 
        <TextInput placeholder="Hello" />  //文本中的提示信息，与Html5的<input>相同
      </View>
   );
}

AppRegistry.registerComponent('MyApp', () => App);  //注册应用之后才能正确渲染，且应用作为整体只注册一次

ListView 组件。动态垂直滚动列表。

必需属性：
dataSource : 列表内容的数据来源。
renderRow : 需要渲染的实际内容。
必须函数：
rowHasChanged

import React from 'react';          //导入react
import  { AppRegistry,View,Text,ListView} from 'react-native';    //导入Text,View,ListView

class SimpleList extends React.Component {
  //初始化数据
  constructor(props) {  
  super(props);
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); // 比较两行数据是否是一个数据
  this.state = {
    dataSource: ds.cloneWithRows(['A','B','C','D','E'])
  };
  render() {
    return (       
      <View> 
          <ListView
              dataSource={this.state.dataSource}
              renderRow={(rowData) => <Text>{rowData}</Text>}
          />
      </View>
   );
}

AppRegistry.registerComponent('MyApp', () => App);  //注册应用之后才能正确渲染，且应用作为整体只注册一次

语法是ES6的语法。本人没有接触过ES6。