react-native--02Hello World

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>;
    }
  }
  

  不使用EcmaScript

  var Greeting = React.createClass({
    render: function() {
      return <Text>Hello, {this.props.name}</Text>;
    }
  });
  

  通过上述两段代码可以很直观的明白, render() 是仅仅是定义在Greeting类中的一个普通的方法，但是它也不普通，因为这在我看来是一个固定式的接口类设计模式，也就是说，Component是Base类，它声明了一个组件必须要有render()这个方法，否则将会报错。