跳到主要内容

核心组件和原生组件

React Native 是一个开源框架,可以使用 React 和应用平台的原生能力来构建 Android 和 iOS 应用程序。使用 React Native,您可以使用 JavaScript 访问平台 API,并使用 React 组件(可重用、可嵌套的代码包)来描述 UI 的外观和行为。您可以在下一节中了解更多关于 React 的信息。但首先,让我们了解组件在 React Native 中的工作原理。

视图和移动开发

在 Android 和 iOS 开发中,**视图**是 UI 的基本构建块:屏幕上的一个小的矩形元素,可用于显示文本、图像或响应用户输入。即使是应用程序中最小的视觉元素,如一行文本或一个按钮,也是视图的一种。某些视图可以包含其他视图。视图无处不在!

Diagram of Android and iOS app showing them both built on top of atomic elements called views.
这只是 Android 和 iOS 应用中使用的众多视图中的一小部分。

原生组件

在 Android 开发中,您使用 Kotlin 或 Java 编写视图;在 iOS 开发中,您使用 Swift 或 Objective-C。使用 React Native,您可以使用 React 组件通过 JavaScript 调用这些视图。在运行时,React Native 会为这些组件创建相应的 Android 和 iOS 视图。因为 React Native 组件由与 Android 和 iOS 相同的视图支持,所以 React Native 应用程序看起来、感觉和表现都像其他任何应用程序一样。我们称这些平台支持的组件为**原生组件。**

React Native 提供了一套必不可少的、即开即用的原生组件,您可以立即开始构建应用程序。这些就是 React Native 的**核心组件**。

注意

本文档引用了一套旧的 API,需要更新以反映新架构

React Native 还允许您为 AndroidiOS 构建自己的原生组件,以满足您应用程序的独特需求。我们还有一个蓬勃发展的**社区贡献组件**生态系统。访问 原生目录,了解社区正在创造什么。

核心组件

React Native 有许多核心组件,涵盖从控件到活动指示器的一切。您可以在 API 部分找到所有文档。您将主要使用以下核心组件:

React Native UI 组件Android 视图iOS 视图Web 类比描述
<View><ViewGroup><UIView>一个不可滚动的 <div>一个支持 flexbox 布局、样式、一些触摸处理和辅助功能控件的容器
<Text><TextView><UITextView><p>显示、样式化和嵌套文本字符串,甚至处理触摸事件
<Image><ImageView><UIImageView><img>显示不同类型的图像
<ScrollView><ScrollView><UIScrollView><div>一个通用的可滚动容器,可以包含多个组件和视图
<TextInput><EditText><UITextField><input type="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.