跳到主要内容

核心组件和原生组件

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.
Android 和 iOS 应用中使用的许多视图的示例。

原生组件

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

React Native 自带了一套基础的、开箱即用的原生组件,你可以用它们来立即开始构建你的应用程序。这些是 React Native 的核心组件(Core Components)

注意

此文档引用了旧版 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.