跳到主要内容

核心组件和原生组件

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 构建自己的原生组件,以满足你应用程序的独特需求。 我们还有一个蓬勃发展的社区贡献组件生态系统。 查看 Native Directory 以找到社区正在创建的内容。

核心组件

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.