核心组件和原生组件
React Native 是一个开源框架,用于使用 React 和应用平台的原生功能构建 Android 和 iOS 应用程序。 通过 React Native,你可以使用 JavaScript 访问平台的 API,并使用 React 组件(可重用、可嵌套的代码包)来描述 UI 的外观和行为。 你可以在下一节中了解更多关于 React 的信息。 但首先,让我们了解组件在 React Native 中是如何工作的。
视图和移动开发
在 Android 和 iOS 开发中,视图是 UI 的基本构建块:屏幕上的一个小矩形元素,可用于显示文本、图像或响应用户输入。 即使是应用程序中最小的视觉元素,如一行文本或一个按钮,也是视图的一种。 某些类型的视图可以包含其他视图。 一切皆视图!
原生组件
在 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 还允许你为 Android 和 iOS 构建自己的原生组件,以满足你应用程序的独特需求。 我们还有一个蓬勃发展的社区贡献组件生态系统。 查看 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,请随时跳过。