React Native0.61 编写Hello World

React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本结构，首先需要了解一些基本的 React 的概念，比如 JSX 语法、组件、state状态以及props属性。

Hello World

根据历史悠久的“传统”，我们也来写一个“Hello, world!”：

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

export default class HelloWorldApp extends Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>Hello, world!</Text>
        </View>
    );
  }
}

你可以新建一个项目，然后用上面的代码覆盖你的App.js文件，然后运行看看。

那这段代码是什么意思呢？

上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是 ES2015 中的特性

示例中的这一行<View><Text>Hello world!</Text></View>叫做 JSX——是一种在 JavaScript 中嵌入 XML 结构的语法。

组件

上面的代码定义了一个名为HelloWorldApp的新的组件（Component）。你在编写 React Native 应用时，肯定会写出很多新的组件。而一个 App 的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的 JSX 语句。