核心组件和原生组件
React Native 是一个开源框架,用于使用 React 和应用平台的原生功能构建 Android 和 iOS 应用。借助 React Native,你可以使用 JavaScript 访问平台的 API,并使用 React 组件描述 UI 的外观和行为:可重用、可嵌套的代码包。你可以在下一节中了解有关 React 的更多信息。但首先,让我们介绍一下组件在 React Native 中是如何工作的。
¥React Native is an open source framework for building Android and iOS applications using React and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native.
视图和移动开发
¥Views and mobile development
在 Android 和 iOS 开发中,视图是 UI 的基本构建块:屏幕上的一个小矩形元素,可用于显示文本、图片或响应用户输入。即使应用中最小的视觉元素(例如一行文本或按钮)也是视图的一种。某些类型的视图可以包含其他视图。一路下来都是景色!
¥In Android and iOS development, a view is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
原生组件
¥Native Components
在 Android 开发中,你可以使用 Kotlin 或 Java 编写视图;在 iOS 开发中,你使用 Swift 或 Objective-C。借助 React Native,你可以使用 React 组件通过 JavaScript 调用这些视图。在运行时,React Native 为这些组件创建相应的 Android 和 iOS 视图。由于 React Native 组件由与 Android 和 iOS 相同的视图支持,因此 React Native 应用的外观、感觉和性能与任何其他应用类似。我们将这些平台支持的组件称为原生组件。
¥In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components Native Components.
React Native 附带了一组基本的、随时可用的原生组件,你可以使用它们立即开始构建应用。这些是 React Native 的核心组件。
¥React Native comes with a set of essential, ready-to-use Native Components you can use to start building your app today. These are React Native's Core Components.
此文档引用了一组旧版的 API,需要更新以反映新架构
¥This documentation references a legacy set of API and needs to be updated to reflect the New Architecture
React Native 还允许你为 安卓 和 iOS 构建自己的原生组件,以满足你应用的独特需求。我们还拥有由这些社区贡献的组件组成的蓬勃发展的生态系统。查看 原生目录 以了解社区所创建的内容。
¥React Native also lets you build your own Native Components for Android and iOS to suit your app’s unique needs. We also have a thriving ecosystem of these community-contributed components. Check out Native Directory to find what the community has been creating.
核心组件
¥Core Components
React Native 有许多核心组件,涵盖从控件到活动指示器的所有内容。你可以找到它们全部 记录在 API 部分。你将主要使用以下核心组件:
¥React Native has many Core Components for everything from controls to activity indicators. You can find them all documented in the API section. You will mostly work with the following Core Components:
React Native UI 组件 | 安卓视图 | iOS 视图 | 网络模拟 | 描述 |
---|---|---|---|---|
<View> | <ViewGroup> | <UIView> | 非滚动 <div> | 支持 Flexbox 布局、样式、一些触摸处理和辅助功能控件的容器 |
<Text> | <TextView> | <UITextView> | <p> | 显示、设置样式和嵌套文本字符串,甚至处理触摸事件 |
<Image> | <ImageView> | <UIImageView> | <img> | 显示不同类型的图片 |
<ScrollView> | <ScrollView> | <UIScrollView> | <div> | 可以包含多个组件和视图的通用滚动容器 |
<TextInput> | <EditText> | <UITextField> | <input type="text"> | 允许用户输入文本 |
在下一节中,你将开始组合这些核心组件来了解 React 的工作原理。现在就在这里和他们一起玩吧!
¥In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
由于 React Native 使用与 React 组件相同的 API 结构,因此你需要了解 React 组件 API 才能开始。下一节 可以快速介绍或复习该主题。但是,如果你已经熟悉 React,请随意 向前跳。
¥Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The next section makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to skip ahead.