版本：0.78

学习基础知识

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。发现错误？报告问题 →

React Native 类似于 React，但它使用原生组件而非 Web 组件作为构建单元。因此要理解 React Native 应用的基本结构，你需要掌握一些基本的 React 概念，如 JSX、组件、state 和 props。如果你已经熟悉 React，仍需要学习 React Native 特有的知识，比如原生组件。本教程面向所有开发者，无论你是否具备 React 经验。

让我们开始吧。

Hello World

遵循悠久的编程传统，我们首先要构建一个只显示 "Hello, world!" 的应用。代码如下：

如果你感兴趣，可以直接在网页模拟器中体验示例代码。也可以将其粘贴到本地的 App.js 文件中创建真实应用。

代码解析

首先需要导入 React 才能使用 JSX，它会被转换为各平台的原生组件。
第 2 行从 react-native 导入 Text 和 View 组件。

接着我们定义 HelloWorldApp 函数，这是一个函数式组件，其行为与 Web 版 React 中的组件一致。该函数返回带有样式的 View 组件及其子元素 Text。

Text 组件用于渲染文本，View 组件则渲染容器。这个容器应用了多个样式，我们来逐一分析：

第一个样式是 flex: 1，flex 属性决定了子元素如何沿主轴"填充"可用空间。由于只有一个容器，它会占据父组件的全部空间。本例中它是唯一组件，因此将占满整个屏幕空间。

下一个样式是 justifyContent: "center"，这会使容器的子元素沿主轴居中。最后是 alignItems: "center"，让子元素沿交叉轴居中。

这里有些语法可能不像你熟悉的 JavaScript。别担心，这是未来的趋势。

ES2015（又称 ES6）是 JavaScript 的增强标准，虽然尚未被所有浏览器支持，在 Web 开发中还不普及。但 React Native 内置支持 ES2015，因此你可以放心使用这些特性。上文示例中的 import、export、const 和 from 都是 ES2015 特性。如果不熟悉 ES2015，通过阅读本教程的示例代码也能掌握。这个页面详细介绍了 ES2015 特性。

代码中另一个特殊部分是 <View><Text>Hello world!</Text></View>。这是 JSX——一种在 JavaScript 中嵌入 XML 的语法。多数框架使用专门的模板语言在标记语言中嵌入代码，而 React 反其道而行：JSX 允许在代码中编写标记语言。它类似 Web 的 HTML，但不是使用 <div> 或 <span> 等 Web 标签，而是使用 React 组件。本例中，<Text> 是显示文本的核心组件，View 则类似于 <div> 或 <span>。

组件

这段代码定义了 HelloWorldApp，一个新的 Component。在构建 React Native 应用时，你会经常创建新组件。屏幕上所有可见内容都是某种形式的组件。

属性

大多数组件在创建时可通过不同参数进行定制。这些创建参数称为 props（属性）。

自定义组件也可以使用 props。这让你能创建单一组件并在应用不同位置复用，每个位置只需调整不同属性。在函数组件中通过 props.YOUR_PROP_NAME 访问，类组件中通过 this.props.YOUR_PROP_NAME 访问。示例如下：

TypeScript
JavaScript

使用 name 作为 prop 可以定制 Greeting 组件，这样我们就能复用该组件实现各种问候语。此示例还在 JSX 中使用了 Greeting 组件，这种能力正是 React 的精妙之处。

这里出现的另一个新组件是 View。View 作为容器组件，能有效控制子组件的样式和布局。

通过 props 和基础组件 Text、Image、View，你可以构建多种静态界面。要让应用随时间变化，需要学习状态管理。

状态

与只读属性不同，state 允许 React 组件响应用户操作、网络请求等变化，动态更新输出内容。

React 中 state 和 props 有何区别？

在 React 组件中，props 是从父组件传递给子组件的变量。而 state 同样是变量，区别在于它不由外部传入，而是组件自身初始化并管理。

React 与 React Native 的状态处理有差异吗？

tsx
// ReactJS Counter Example using Hooks!

import React, {useState} from 'react';



const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

tsx
// React Native Counter Example using Hooks!

import React, {useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

如前所示，React 和 React Native 的 state 处理方式完全一致。无论是类组件还是函数组件（使用钩子），你都可以使用相同的状态管理机制！

下面的示例我们将用类组件实现相同的计数器功能。

Hello World​

代码解析​

组件​

属性​

状态​

React 中 state 和 props 有何区别？​

React 与 React Native 的状态处理有差异吗？​

Hello World

代码解析

组件

属性

状态

React 中 state 和 props 有何区别？

React 与 React Native 的状态处理有差异吗？