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

欧阳楚
2023-12-01

  
  

  
  

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学习指南


  
  




 类似资料: