跳至主内容
版本:0.82

核心组件与原生组件

非官方测试版翻译

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

React Native 是一个开源框架,用于通过 React 和移动平台原生能力构建 Android 与 iOS 应用。使用 React Native 时,您可以通过 JavaScript 访问平台 API,并使用 React 组件描述 UI 的外观和行为——这些组件是可复用、可嵌套的代码单元。您可以在后续章节深入了解 React,但首先让我们介绍 React Native 中组件的工作原理。

视图与移动开发

在 Android 和 iOS 开发中,视图(view) 是 UI 的基本构建单元:屏幕上用于显示文本、图像或响应用户交互的矩形元素。即使是应用中最小的视觉元素(如一行文本或按钮)也都是视图。某些视图可以包含其他视图——这形成了完整的视图层级结构!

Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.

原生组件

在 Android 开发中,您使用 Kotlin 或 Java 编写视图;在 iOS 开发中则使用 Swift 或 Objective-C。通过 React Native,您可以使用 JavaScript 借助 React 组件调用这些视图。运行时,React Native 会为这些组件创建对应的 Android 和 iOS 原生视图。由于 React Native 组件由与 Android/iOS 相同的底层视图支持,因此其应用的外观、交互和性能表现与原生应用完全一致。我们将这类平台支撑的组件称为原生组件(Native Components)

React Native 内置了一组开箱即用的基础原生组件,您今天就可以开始构建应用。这些就是 React Native 的核心组件(Core Components)

注意

本文档涉及旧版 API,需更新至新架构规范

React Native 还允许您为 AndroidiOS 构建自定义原生组件以满足独特需求。同时我们拥有活跃的社区贡献组件生态,欢迎访问 Native Directory 探索社区成果。

核心组件

React Native 提供涵盖控件到活动指示器等各类功能的核心组件,您可以在 API 文档章节 查看完整列表。最常用的核心组件包括:

React Native UI ComponentAndroid ViewiOS ViewWeb AnalogDescription
<View><ViewGroup><UIView>A non-scrolling <div>A container that supports layout with flexbox, style, some touch handling, and accessibility controls
<Text><TextView><UITextView><p>Displays, styles, and nests strings of text and even handles touch events
<Image><ImageView><UIImageView><img>Displays different types of images
<ScrollView><ScrollView><UIScrollView><div>A generic scrolling container that can contain multiple components and views
<TextInput><EditText><UITextField><input type="text">Allows the user to enter text

下一节中,您将通过组合这些核心组件来学习 React 的工作原理。现在不妨先体验它们的功能!


由于 React Native 采用与 React 组件相同的 API 结构,您需要掌握 React 组件 API 才能开始开发。下一节 提供了快速入门或复习资料。若您已熟悉 React,可直接跳转至后续内容

A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.