教程
React Native 跟前端的React框架很像,但是React Native是使用本地的组件像搭积木一样的把UI呈现出来而不是用web端的组件。所以为了理解React Native app的基本结构,你需要理解一些基本的React框架的概念,像JSX, components, state, and props。如果你已经知道了React框架,那你仍然需要学习一些React Native特有的东西,像本地组件之类的。这篇教程是针对所有人的,不管是你有没有React框架经验。
让我们开始吧!
Hello Word
按照我们码农的古老传统,我们必须先建一个除了说 "Hello World"没其他鸟用的app,如下:
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
如果你感觉很好奇,你可以直接直接修改上面的代码,web模拟器会实时更新 (原文链接tutorial,可以去玩玩),你也可以把上面的代码复制到你的index.ios.js
或者index.android.js
文件中,在你本地计算机上创建一个真正的app。
这里发生了什么?
这里的代码有些看起来又不像JavaScript,淡定!这是后话。
首先,ES2015(也称为ES6)是一套改进的JavaScript,现在是官方标准的一部分,但因为不是所有的浏览器都支持,所以在web开发中尚未使用。React Native自带ES2015支持,所以你可以使用它,无需担心兼容性。import, from, class, extends,和()=>在示例中出现的这些语法都是ES2015功能。如果你不熟悉ES2015,你也可以只通过读教程中的示例代码来学习,如果你想了解更多,this page有关于ES2015功能很好的概述。
在这个示例代码中,另外一个不寻常的事情是<Text>Hello world!</Text>
,这是JSX - 一种在JavaScript中嵌入XML语法。很多框架使用一个特殊的模板语言,它可以让你在标记语言里写代码。在React,正好相反, JSX让你在代码里写标记语言,它看起来像web上的HTML,除了没有web 的<div>或<span>,你可以使用React的组件,在这种情况下,<Text>是一个内置组件,只是用来显示一些文本。
Component and AppRegistry
因此,这段代码定义了一个新的组件 - HelloWorldApp,并用AppRegistry注册了它。当你正在构建一个React Native app,你会写出很多新的组件,你在屏幕上看到的所有都是某种组件,一个组件可以是很简单 - 唯一要满足的是有一个render
函数,用来返回一些需要传递的JSX。
AppRegistry只是告诉React Native哪个组件是整个应用程序的根(root one)。你不必思考太多有关AppRegistry的事情 - 因为它有可能在你整个app中只被调用一次。它包含在这些例子,所以你可以将代码都粘贴到你的index.ios.js或index.android.js文件,并运行。
这个App做不了更多事情啦
想要让组件做更多的有趣的事情,你需要学习下一章节 'Props'。