React Native看起来很像React，只不过其基础组件是原生组件而非web组件，。要理解React Native应用的基本结构，首先需要了解一些基本的react概念，比如JSX语法，组件，state状态以及props属性。如果已经了解react，那么还需要掌握一些react native特有的知识，比如原生组件的使用。
这是一篇基础教程，适合任意基础的读者学习。
根据上一篇环境搭建后新建项目的步骤，新建一个HelloWorldApp,，用以下代码覆盖App.js文件。
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>
);
}
}
运行结果如图
那这段代码是什么意思呢？
首先你需要了解ES2015（也叫作ES6）——这是一套对JavaScript的语法改进的官方标准。React Native内置了对ES6标准的支持，你可以放心使用而无须担心兼容性问题。
在上面的示例代码中，import、from、extends以及()=>箭头函数等新语法都是ES6中的特性。如果不熟悉ES6，可以看看http://es6.ruanyifeng.com/。
实例中的这一行<View><Text>Hello World!</Text></View>叫做JSX——一种在JavaScript中嵌入XML结构的语法。很多传统的应用框架会设计自有的模板语法，让我们在结构标记中嵌入代码。react反其道而行之，设计的JSX语法却是让你在代码中嵌入结构标记。初看起来，这种写法很像web上的HTML，只不过使用的并不是web上常见的标签如<div>或是<span>等，这里我们使用的是React Native的组件。上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本，而<View>就类似html中的div或者span这样的容器。
组件
上面的示例代码定义了一个名为HelloWorldApp的新的组件（Conponent）。在编写React Native应用时，肯定会写出很多新的组件。而一个APP的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。
网友评论