React Native学习笔记（二）--index.android.js 内容和ReactNative组件（<Text>、AppRegistry、View、StyleSheet）及Component

Part One

首先，打开MyProject目录（这个就是我们的项目目录）下的的index.android.js文件，其实这个名字你可以自己定义，不一定非要命名为index.android.js。

下面就让我们来分析一下这个文件的内容结构和一些注意事项。

import React, { Component } from 'react';
import { // 引入React Native组件，当我们需要使用不同的组件来搭建界面的时候，用到的组件就必须在这里引入
	AppRegistry,
	StyleSheet,
	Text,
	View
} from 'react-native';

上面这部分代码：
第一行 import 引入了 React库，React是Facebook开发的一款JS库，主要用于构建哪些数据会随时改变的大型应用，有如下两个主要的特点：
1.简单
简单的表述任意时间点你的应用应该是什么样子（也就是数据格式和展示），当数据发生改变的时候React将会自动的管理UI界面更新；
2.声明式
在数据发生变化的时候，React实际上只是更新了变化的部分（也就是说只更新数据发生改变的UI）

注：更加详细的请看这里：http://www.jianshu.com/p/ae482813b791

在引入React库之后，通过{}将Component类引入，Component是React库中的一个基类，用于被继承和创建React自定义组件。

第二行：import {...} from 'react-native' 大括号内是一些组件，比如：
AppRegistry组件：用于注册当前Component，比如我们写的是MyProject extends Component，在文件最后一行我们使用AppRegistry.registerComponent('MyProject', () => MyProject);将当前Component注册进来。
StyleSheet：样式管理类，比如下面的这段：

	const styles = StyleSheet.create({ // 调用Create创建变量，通过const声明变量styles并赋值 
		container: {
			flex: 1,
			justifyContent: 'center',
			alignItems: 'center',
			backgroundColor: '#F5FCFF',
		},
		welcome: {
			fontSize: 20,
			textAlign: 'center',
			margin: 10,
		},
		instructions: {
			textAlign: 'center',
			color: '#333333',
			marginBottom: 5,
		},// 最后这个逗号可以省略
	});

上面我们创建一个全局的styles变量，至于const关键字大家可以看一下阮一峰的 ECMAScript 6简介
View：用于显示内容，在Android中相当于ViewGroup
Text：用于指定显示格式的内容，比如：文字；除此之外还有：Image、ListView、ScrollView等组件，之后我们再详细讲。

Part Two

然后我们来看一下核心代码：

	export default class MyProject extends Component {
		render() {
			return (
				<View style={styles.container}>
 					<Text style={styles.welcome}>
 						Welcome to React Native!
 					</Text>
					<Text style={styles.instructions}>
 						To get started, edit index.android.js
 					</Text>
 					<Text style={styles.instructions}>
 						Double tap R on your keyboard to reload,{'\n'}
						Shake or press menu button for dev menu
 					</Text>
 				</View>
			);
		}
	}

上面这段代码就是我们App界面中要展示的内容了，我们可以看到里面有一个render()方法，这是Component类的一个方法用于渲染界面，他负责将其return回来的View渲染出来。

此方法会被一些用户行为被动唤醒，从而引起界面刷新，比我我们常用到的就是this.setState()方法。

另外需要注意的就是在为组件指定style的时候，React Native组件指定style的写法和Javascript的写法不同：

JavaScript写法： style="opacity:{this.state.opacity};"

ReactNative写法： style={{opacity:this.state.opacity}}

之所以写法不同是因为React组件的样式是对象，所以第一个大括号表示这是JavaScript的写法，里面的大括号表示一个样式对象。

Part Three

最后，通过AppRegistry将我们的Component注册进MainActivity

AppRegistry.registerComponent('MyProject', () => MyProject); 

在我们项目中有android这个文件夹通过AndroidStudio打开这个文件夹，gradle编译之后，我们打开MainActivity会发现，里面的内容很简单;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "MyProject"; // 这里只需要返回当前要显示的Component名称，就代表此Activity要显示的就是哪个界面
    }
}

Part Four

资料：

React Native官网--编写Hello World

React 官方api

React Native开发技术周报

React Native学习指南