React Native 之教程_rn教程 appregister-CSDN博客

React native 简称RN ,它很接近原生APP，但是他使用原生组件而不是web组件作为构建快。因此，为了理解 RN APP 基本结构，你需要理解基本原生概念，例如JSX 、组件、state、和props 。如果你已经理解这些概念，你还需要学习一些 RN 的特殊部分，例如一些原生组件。本篇文章针对大众开发者，无论你是有RN 开发经验。

Hello world

按照我们习惯，我们首先创建一个简单的App，上面显示“Hello world“ ,代码如下：

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 模拟器上。你也可以把上面代码复制到你的 index.ios.js 或 index.android.js文件中，在你本地模拟器上创建一个真的 rn app 。

这是怎么回事?

在这里的一些事情可能不像JavaScript，不要恐慌，这是未来。

在这里的一些事情可能不像JavaScript。不要恐慌。这是未来。

首先,ES2015(也称为ES6)是一组改进JavaScript,现在官方标准的一部分,但不支持所有浏览器,所以经常不使用在web开发。本机附带ES2015支持反应,所以你可以用这个东西而不用担心兼容性。import, from, class, extends,和()= >语法在上面的示例都是ES2015特性。如果你不熟悉ES2015,你可以把它捡起来仅仅通过阅读像本教程示例代码。如果你愿意,这个页面有很好的ES2015特性的概述。

在这段代码中另一个不同寻常的例子是<文本> Hello world ! < /文本>。这是JSX——JavaScript内嵌入的XML语法。许多框架使用一个特殊的模板语言可以让你内嵌入标记语言。在RN中,这是逆转。JSX允许您编写内部标记语言代码。您使用RN 组件时，它看起来像HTML ,除了而不是web <div >或<span>。在这种情况下,<文本>是一个内置组件,只显示一些文本。

组件和AppRegistry

这代码定义HelloWorldApp,一个新组件,用AppRegistry注册它。当你创建一个RN App,你会使用任何你在屏幕上看到的是一些新组件。一个组件可以很简单,唯一的要求是一个渲染函数 render 返回一些JSX呈现。

AppRegistry只是告诉React一整个应用程序根组件。你不会思考AppRegistry很多——可能只是一个叫AppRegistry.registerComponent在您的整个应用程序。包括在这些例子中,这样你就可以将整个粘贴到你的index.ios.js或index.android.js文件并使其运行。

关注公众号：

这里写图片描述