Hello World 样例代码分析
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class rn_practice 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>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('rn_practice', () => rn_practice);
EcmaScript 2015
语法
- let 用来声明变量，只在let命令所在的代码块内有效。
- var 用来声明变量，全局有效。
- const 声明一个只读的常量。一旦声明，常量的值就不能改变。
- import xx from xx 用来导入其他文件中的代码块，跟python类似。
- export class rn_practice 用于定义可导入，意思是说，这个类可以被其他文件导入，导入方式为==import {rn_practice} from android.index==
- export default class rn_practice 也是用于定义导入，导入方式为==import rn_practice from android.index==
-
() => {} 用于事件驱动(变量传递: 这里表示事件驱动运算出来的值当作xx变量传递给下一个代码块)，类似于python中的lambda， 提供一个样例代码来说明。
等同于setInterval(() => { this.setState({ showText: !this.state.showText }); }, 1000);setInterval(function() { this.setState({ showText: !this.state.showText }); }, 1000); - 'use strict'; 在文件头部引用该标注，表示进入严谨模式。
参考地址：
- [x] 阮一峰--ES6
- [x] Babeljs.io
React Native 组件
-
JSX Facebook对JSX的详细介绍
意思是说，采用react-native的jsx，它允许你直接在react-native的代码中直接编写模版代码和COMPONENTS，而不是像python这样模版代码还要单独利用标记语言写在html文件内。
在hello world!这个代码样例中， jsx囊括了两样东西(模版语法和组件)模版语法:
- { } # 变量引用
组件(COMPONENTS)
- TEXT # 文本显示区域
- VIEW # 最基础的布局组件，类似与html中的div。
AppRegistry
这是所有react-native提供给开发者的一个注册app功能，开发者通过将编写好的应用程序代码，指定提交给AppRegistry。这样它便可以再初始化完所有预备操作之后去运行这个app(runApplication)。StyleSheet
类似与html中的css，但是变量名定义不一样。Componments
当前React Native提供了34个组件，每个组件都依赖大量的参数来控制其行为，这些参数在这里被称之为: Props。-
return()
引用原文
React.Component is an abstract base class, so it rarely makes sense to refer to React.Component directly. Instead, you will typically subclass it, and define at least a render() method.大致意思是说，Component是一个抽象类，编写组件时需继承该抽象类，并且每个组件类中必须要包含一个render().
另外一种方式的理解:
这是常规定义React组件的代码(利用了EcmaScript特性: 继承)class Greeting extends React.Component { render() { return <Text>Hello, {this.props.name}</Text>; } }var Greeting = React.createClass({ render: function() { return <Text>Hello, {this.props.name}</Text>; } });通过上述两段代码可以很直观的明白, render() 是仅仅是定义在Greeting类中的一个普通的方法，但是它也不普通，因为这在我看来是一个固定式的接口类设计模式，也就是说，Component是Base类，它声明了一个组件必须要有render()这个方法，否则将会报错。
