核心组件与原生组件
本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →
React Native 是一个开源框架,用于通过 React 和移动平台原生能力构建 Android 与 iOS 应用。使用 React Native 时,您可以通过 JavaScript 访问平台 API,并使用 React 组件描述 UI 的外观和行为——这些组件是可复用、可嵌套的代码单元。您可以在后续章节深入了解 React,但首先让我们介绍 React Native 中组件的工作原理。
视图与移动开发
在 Android 和 iOS 开发中,视图(view) 是 UI 的基本构建单元:屏幕上用于显示文本、图像或响应用户交互的矩形元素。即使是应用中最小的视觉元素(如一行文本或按钮)也都是视图。某些视图可以包含其他视图——这形成了完整的视图层级结构!
原生组件
在 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 还允许您为 Android 和 iOS 构建自定义原生组件以满足独特需求。同时我们拥有活跃的社区贡献组件生态,欢迎访问 Native Directory 探索社区成果。
核心组件
React Native 提供涵盖控件到活动指示器等各类功能的核心组件,您可以在 API 文档章节 查看完整列表。最常用的核心组件包括:
| React Native UI Component | Android View | iOS View | Web Analog | Description |
|---|---|---|---|---|
<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,可直接跳转至后续内容。