React Native HelloWorld初探

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native。

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。React Native 使你能够使用基于 JavaScript 和 React一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。“Learn once, write anywhere”

根据传统习惯，我们学习一门新的语言，都从“HelloWorld”开始。下面看下React Native（后面将简称为RN）的“HelloWorld”程序。后续关于RN的文章都是ES6语法格式，不熟悉ES6语法的可以参考看下阮一峰老师的书，http://es6.ruanyifeng.com/

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.helloworld}>
          Hello World React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  helloworld: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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

下面将分四部分来介绍这段代码：

一、import部分，import React, { Component } from 'react';从react和react-native包中引入一些组件，和android中的import意思一致。

二、HellWorld类，render渲染函数，里面渲染就是我们的UI界面，这个函数里面内嵌了标签语言，这就是由于JS语言的一部分，在函数里可以直接使用标签语言。这里用了2个组件，View和Text组件。View和android中的布局类似，是个容器组件，可以设置水平垂直属性等，Text文本组件用于显示文本内容。RN的组件可以设置各自的显示风格。

三、Style，显示风格，Web中使用CSS，RN中使用Style，定义组件的Style很简单，const styles = StyleSheet.create，在create函数按照需求去定义各个组件的style就行了，然后再标签中style={styles.define}，rn渲染的时候就会按照定义的style去显示UI。具体的style属性，后续会慢慢给大家介绍。

四、程序入口。调用AppRegistry.registerComponent函数，有2个参数一个字符串类型，一个是一个箭头函数。

说了这么多看下最终显示的效果吧。

原创不易，如果您觉得好，可以分享此公众号给你更多的人。