From b49c9e10e0b0c6c4dfe9b61cb02c2f8c7a048696 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Fri, 10 Apr 2026 23:23:14 +0800 Subject: [PATCH 1/6] =?UTF-8?q?docs(cndocs):=20=E5=90=8C=E6=AD=A5=E5=B7=B2?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=E5=99=A8?= =?UTF-8?q?=E7=AD=89=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cndocs/datepickerandroid.md | 84 +---------------- cndocs/datepickerios.md | 178 +----------------------------------- cndocs/dynamiccolorios.md | 16 ++-- 3 files changed, 17 insertions(+), 261 deletions(-) diff --git a/cndocs/datepickerandroid.md b/cndocs/datepickerandroid.md index b8348b8b46c..4d74ca3722c 100644 --- a/cndocs/datepickerandroid.md +++ b/cndocs/datepickerandroid.md @@ -1,84 +1,8 @@ --- id: datepickerandroid -title: 🚧 DatePickerAndroid +title: '❌ DatePickerAndroid' --- -> **Deprecated.** Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. - -本组件会打开一个标准的 Android 日期选择器的对话框。 - -### 示例 - -```jsx -try { - const { - action, - year, - month, - day - } = await DatePickerAndroid.open({ - // 要设置默认值为今天的话，使用`new Date()`即可。 - // 下面显示的会是2020年5月25日。月份是从0开始算的。 - date: new Date(2020, 4, 25) - }); - if (action !== DatePickerAndroid.dismissedAction) { - // 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day - } -} catch ({ code, message }) { - console.warn('Cannot open date picker', message); -} -``` - -### 查看方法 - -- [`open`](datepickerandroid.md#open) -- [`dateSetAction`](datepickerandroid.md#datesetaction) -- [`dismissedAction`](datepickerandroid.md#dismissedaction) - ---- - -# 文档 - -## 方法 - -### `open()` - -```jsx -static open(options) -``` - -打开一个标准的 Android 日期选择器的对话框。 - -可选的`options`对象的 key 值如下： - -- `date` (`Date`对象或毫秒时间戳) - 默认显示的日期 -- `minDate` (`Date`对象或毫秒时间戳) - 可选的最小日期 -- `maxDate` (`Date`对象或毫秒时间戳) - 可选的最大日期 -- `mode` (`enum('calendar', 'spinner', 'default')`) - 设置选择器的模式： - - 'calendar': Show a date picker in calendar mode. - - 'spinner': Show a date picker in spinner mode. - - 'default': Show a default native date picker(spinner/calendar) based on android versions. - -在用户选好日期后返回一个 Promise，回调参数为一个对象，其中包含有`action`, `year`, `month` (0-11), `day`。如果用户取消了对话框，Promise 仍然会执行，返回的 action 为`DatePickerAndroid.dismissedAction`，其他几项参数则为 undefined。所以请在使用其他值之前**务必**先检查`action`的值是否为`DatePickerAndroid.dateSetAction`。 - -Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options. - ---- - -### `dateSetAction()` - -```jsx -static dateSetAction() -``` - -已选中一个日期。 - ---- - -### `dismissedAction()` - -```jsx -static dismissedAction() -``` - -对话框已被取消。 +:::danger 已从 React Native 移除 +请改用[社区包](https://reactnative.directory/?search=datepicker)。 +::: diff --git a/cndocs/datepickerios.md b/cndocs/datepickerios.md index 371eb04971e..3c84f1b7eed 100644 --- a/cndocs/datepickerios.md +++ b/cndocs/datepickerios.md @@ -1,178 +1,8 @@ --- id: datepickerios -title: 🚧 DatePickerIOS +title: '❌ DatePickerIOS' --- -> **Deprecated.** Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. - -使用`DatePickerIOS`来在 iOS 平台上渲染一个日期/时间选择器。这是一个受约束的(Controlled)组件，所以你必须监听`onDateChange`回调函数并且及时更新`date`属性来使得组件更新，否则用户的修改会立刻被撤销来确保当前显示值和`props.date`一致。 - -### 示例 - -``` -import React, { Component } from 'react' -import { - DatePickerIOS, - View, - StyleSheet, -} from 'react-native' - -export default class App extends Component { - constructor(props) { - super(props); - this.state = { chosenDate: new Date() }; - - this.setDate = this.setDate.bind(this); - } - - setDate(newDate) { - this.setState({chosenDate: newDate}) - } - - render() { - return ( - - - - ) - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center' - }, -}) -``` - -
- ---- - -# 文档 - -## Props - -### `date` - -当前被选中的日期。 - -| 类型 | 必需 | -| ---- | ---- | -| Date | 是 | - ---- - -### `onChange` - -Date change handler. - -This is called when the user changes the date or time in the UI. The first and only argument is an Event. For getting the date the picker was changed to, use onDateChange instead. - -| 类型 | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDateChange` - -日期/时间变化的监听函数。 - -当用户修改日期或时间时调用此回调函数。唯一的参数是一个日期对象，表示新的日期和时间。 - -| 类型 | 必需 | -| -------- | ---- | -| function | 是 | - ---- - -### `maximumDate` - -可选的最大日期。 - -限制可选的日期/时间范围。 - -| 类型 | 必需 | -| ---- | ---- | -| Date | 否 | - -Example with `maximumDate` set to December 31, 2017: - -
- ---- - -### `minimumDate` - -可选的最小日期。 - -限制可选的日期/时间范围。 - -| 类型 | 必需 | -| ---- | ---- | -| Date | 否 | - -See [`maximumDate`](datepickerios.md#maximumdate) for an example image. - ---- - -### `minuteInterval` - -可选的最小的分钟单位。 - -| 类型 | 必需 | -| ------------------------------------------ | ---- | -| enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) | 否 | - -Example with `minuteInterval` set to `10`: - -
- ---- - -### `mode` - -选择器模式。 - -| 类型 | Required | -| --------------------------------------------- | -------- | -| enum('date', 'time', 'datetime', 'countdown') | No | - -Example with `mode` set to `date`, `time`, and `datetime`: ![](assets/DatePickerIOS/mode.png) - ---- - -### `locale` - -The locale for the date picker. Value needs to be a [Locale ID](https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html). - -| 类型 | 必需 | -| ------ | ---- | -| String | 否 | - ---- - -### `timeZoneOffsetInMinutes` - -时区差，单位是分钟。 - -默认情况下，选择器会选择设备的默认时区。通过此参数，可以指定一个时区。举个例子，要使用北京时间（东八区），可以传递 8 \* 60。 - -| 类型 | 必需 | -| ------ | ---- | -| number | 否 | - ---- - -### `initialDate` - -Provides an initial value that will change when the user starts selecting a date. It is useful for simple use-cases where you do not want to deal with listening to events and updating the date prop to keep the controlled state in sync. The controlled state has known bugs which causes it to go out of sync with native. The initialDate prop is intended to allow you to have native be source of truth. - -| 类型 | Required | -| ---- | -------- | -| Date | No | +:::danger 已从 React Native 中移除 +请改用[社区包](https://reactnative.directory/?search=datepicker)。 +::: diff --git a/cndocs/dynamiccolorios.md b/cndocs/dynamiccolorios.md index 55cebd90ac2..0dbd961e181 100644 --- a/cndocs/dynamiccolorios.md +++ b/cndocs/dynamiccolorios.md @@ -16,24 +16,26 @@ DynamicColorIOS({ }); ``` -`DynamicColorIOS` 接受一个参数，该参数是一个包含两个键的对象：`dark` 和 `light`。这些对应于您想在 iOS 上用于“浅色模式”和“深色模式”的颜色。 +`DynamicColorIOS` 接受一个对象参数，该对象包含两个必填键：`dark` 和 `light`，以及两个可选键：`highContrastLight` 和 `highContrastDark`。这些分别对应你希望在 iOS 的“浅色模式”和“深色模式”下使用的颜色；当启用高对比度辅助功能模式时，则会使用它们对应的高对比度版本。 -> 将来可能会有更多的键可用于不同用户偏好，比如高对比度。 - -在运行时，系统将根据当前系统外观设置选择显示其中之一的颜色。动态颜色适用于品牌颜色或其他自定义应用程序特定颜色，仍然可以自动响应系统设置更改。 +在运行时，系统会根据当前的系统外观和辅助功能设置来选择显示哪一种颜色。动态颜色非常适合品牌色或其他应用专用颜色，同时仍能自动响应系统设置的变化。 #### 开发者笔记 - + -> 如果你熟悉 CSS 中的 `@media (prefers-color-scheme: dark)`，这个功能类似！只是不同于在媒体查询中定义所有颜色，而是直接在使用它的地方定义在什么情况下使用哪种颜色。很棒！ +:::info +如果你熟悉 CSS 中的 `@media (prefers-color-scheme: dark)`，这与它很类似！不同的是，你不是在媒体查询中定义所有颜色，而是直接在使用它的地方定义在什么情况下该使用哪种颜色。很方便！ +::: -> `DynamicColorIOS`函数类似于iOS原生方法[`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider)。 +:::info +`DynamicColorIOS` 函数类似于 iOS 原生方法 [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider)。 +::: From c141038e7ec79f82d1d93db63192ab612078870b Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Fri, 10 Apr 2026 23:42:15 +0800 Subject: [PATCH 2/6] =?UTF-8?q?docs(cndocs):=20=E5=90=8C=E6=AD=A5=E8=B0=83?= =?UTF-8?q?=E8=AF=95=E4=B8=8E=E8=BE=93=E5=85=A5=E7=9B=B8=E5=85=B3=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cndocs/debugging.md | 142 +++++++++++++--------------------- cndocs/handling-text-input.md | 34 +++++--- cndocs/imagebackground.md | 21 +++-- 3 files changed, 84 insertions(+), 113 deletions(-) diff --git a/cndocs/debugging.md b/cndocs/debugging.md index 4626224e9db..300d4c7aa56 100644 --- a/cndocs/debugging.md +++ b/cndocs/debugging.md @@ -1,142 +1,104 @@ --- id: debugging -title: 调试 +title: 调试基础 --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -## 访问 App 内的开发菜单 - -React Native 提供了一个内置的开发者菜单，其中包含多个调试选项。您可以通过摇动设备或使用键盘快捷键访问开发者菜单： - -- iOS 模拟器：按下 Cmd ⌘ + D（或选择 设备 > 摇动） -- Android 模拟器：按下 Cmd ⌘ + M（macOS）或 Ctrl + M（Windows 和 Linux） - -或者，对于 Android 设备和模拟器，您可以在终端中运行 `adb shell input keyevent 82`。 - -![React Native开发者菜单](/docs/assets/debugging-dev-menu.jpg) - :::note -在发布（release）版本中开发者菜单将无法使用。 +调试功能（例如开发者菜单、LogBox 和 React Native DevTools）在 release（生产）构建中会被禁用。 ::: -## 打开调试器 +## 打开开发者菜单 -调试器允许你了解和调试你的 JavaScript 代码的运行方式，类似于一个网页浏览器。 +React Native 提供了一个应用内开发者菜单，可用于访问调试功能。你可以通过摇动设备或使用键盘快捷键打开开发者菜单： -:::info -**在 Expo 项目中**，在命令行界面中按下 j 键直接打开 Hermes 调试器。 -::: +- iOS 模拟器：Ctrl + Cmd ⌘ + Z（或选择 Device > Shake） +- Android 模拟器：Cmd ⌘ + M（macOS）或 Ctrl + M（Windows 和 Linux） - - +其他方式（Android）：`adb shell input keyevent 82`。 -Hermes 通过实现 Chrome DevTools 协议来支持 Chrome 调试器。这意味着可以使用 Chrome 的工具直接调试在 Hermes 上运行的 JavaScript，无论是在模拟器还是在物理设备上。 +![React Native 开发者菜单](/docs/assets/debugging-dev-menu-083.jpg) -1. 在 Chrome 浏览器窗口中，导航到 `chrome://inspect`。 -2. 使用 "Configure..." 按钮添加开发服务器地址（通常是 `localhost:8081`）。 -3. 现在应该能看到一个带有 **"inspect"** 链接的 "Hermes React Native" 目标。点击这个链接打开调试器。 +## 打开 DevTools -![Chrome 检查界面的概述和连接的 Hermes 调试器窗口](/docs/assets/debugging-hermes-debugger-instructions.jpg) +[React Native DevTools](./react-native-devtools) 是 React Native 内置的调试器。它可以帮助你检查并理解 JavaScript 代码的运行方式，类似于网页浏览器中的调试工具。 - - +你可以通过以下任一方式打开 DevTools： -[Flipper](https://fbflipper.com/) 是一个本地调试工具，通过嵌入的 Chrome DevTools 面板为 React Native 提供 JavaScript 调试功能。 +- 在开发者菜单中选择 “Open DevTools” +- 在 CLI 中按下 j -要在 Flipper 中调试 JavaScript 代码，请从 Dev 菜单中选择 **"Open Debugger"**。了解有关 Flipper 的[更多信息](https://fbflipper.com/docs/features/react-native/)。 +![打开到“Welcome”面板的 React Native DevTools](/docs/assets/debugging-rndt-welcome-083.jpg) -:::info -要使用 Flipper 进行调试，必须在您的系统上[安装 Flipper 应用](https://fbflipper.com/docs/getting-started/)。 -::: +首次启动时，DevTools 会打开欢迎面板，同时展开控制台抽屉，你可以在其中查看日志并与 JavaScript 运行时交互。你还可以通过窗口顶部导航到其他面板，包括集成的 React Components Inspector 和 Profiler。 -![Flipper 桌面应用打开的 Hermes 调试器面板](/docs/assets/debugging-flipper-console.jpg) +更多信息请参阅 [React Native DevTools 指南](./react-native-devtools)。 -:::warning -使用 Flipper 调试 React Native 应用在 React Native 0.73 版本中[已弃用](https://github.com/react-native-community/discussions-and-proposals/pull/641)。我们最终将删除通过 Flipper 进行 JS 调试的内置集成（但你仍然可以手动添加集成）。 -::: +## LogBox - - +LogBox 是一个应用内工具，会在应用记录警告或错误时显示出来。 -:::note -**这是一个实验性功能**，目前可能有一些功能无法可靠运行。当这个功能在将来启用时，我们希望它能比当前的调试方法更完善。 -::: +![LogBox 警告以及展开后的 LogBox 语法错误](/docs/assets/debugging-logbox-076.jpg) -React Native 团队正在致力于改进 JavaScript 调试器体验，旨在取代 Flipper，预览版本已在 React Native 0.73 中可用。 +### 致命错误 -可以通过 React Native CLI 启用新的调试器。这也将启用j以进行调试。 +当发生不可恢复的错误时，例如 JavaScript 语法错误，LogBox 会打开并显示错误位置。在这种状态下，LogBox 无法关闭，因为你的代码无法执行。修复语法错误后，LogBox 会自动关闭——无论是通过 Fast Refresh 还是手动重新加载。 -```sh -npx react-native start --experimental-debugger -``` +### 控制台错误和警告 -在开发菜单中选择**"打开调试器"**，将使用 Google Chrome 或 Microsoft Edge 启动新的调试器。 +控制台错误和警告会以带有红色或黄色标记的屏幕通知形式显示。 -![新调试器前端打开到“欢迎”窗格](/docs/assets/debugging-debugger-welcome.jpg) +- **错误** 会显示通知计数。点击通知可查看展开视图，并分页浏览其他日志。 +- **警告** 会显示不含详情的通知横幅，提示你打开 React Native DevTools。 - - +当 React Native DevTools 处于打开状态时，除致命错误外，其他所有错误都不会再显示在 LogBox 中。由于 LogBox 的多种选项可能会隐藏某些日志或调整其级别，我们建议以 React Native DevTools 中的 Console 面板作为日志的主要依据。 -## React DevTools +
+**💡 忽略日志** -您可以使用 React DevTools 来检查 React 元素树、属性和状态。 +可以通过 `LogBox` API 配置 LogBox。 -```sh -npx react-devtools +```js +import {LogBox} from 'react-native'; ``` -![一个 React 开发工具窗口](/docs/assets/debugging-react-devtools-blank.jpg) - -:::tip - -**学习如何使用 React 开发工具！** +#### 忽略所有日志 -- [React 开发工具指南](/docs/next/react-devtools) -- [在 react.dev 上的 React 开发者工具](https://zh-hans.react.dev/learn/react-developer-tools) +可以使用 `LogBox.ignoreAllLogs()` 禁用 LogBox 通知。这在例如进行产品演示时会很有帮助。 -::: - -## LogBox +```js +LogBox.ignoreAllLogs(); +``` -开发版本中的错误和警告会在您的应用程序内部的 LogBox 中显示。 +#### 忽略特定日志 -![A LogBox warning and an expanded LogBox syntax error](/docs/assets/debugging-logbox.jpg) +可以通过 `LogBox.ignoreLogs()` 按日志逐条禁用通知。这对于噪声较大的警告，或者无法修复的警告（例如来自第三方依赖）很有帮助。 -:::note 注意 -LogBox 在发布版本（release）中是自动禁用的。 -::: +```js +LogBox.ignoreLogs([ + // 精确匹配消息 + 'Warning: componentWillReceiveProps has been renamed', -## 控制台的错误与警告提示 + // 子字符串或正则匹配 + /GraphQL error: .*/, +]); +``` -控制台错误和警告以红色或黄色徽章的形式显示为屏幕通知，并分别显示控制台中的错误或警告数量。要查看控制台中的错误或警告，点击通知以查看有关日志的完整信息，并在控制台中浏览所有日志。 +:::note -可以使用`LogBox.ignoreAllLogs()`来隐藏这些通知。例如，在进行产品演示时非常有用。此外，还可以通过`LogBox.ignoreLogs()`来针对特定的日志隐藏通知。当存在无法修复的嘈杂警告（比如第三方依赖项）时，这非常有用。 +LogBox 会将来自 React 的某些错误视为警告，这意味着它们不会显示为应用内错误通知。高级用户可以通过自定义 LogBox 的 warning filter，使用 [`LogBoxData.setWarningFilter()`](https://github.com/facebook/react-native/blob/d334f4d77eea538dff87fdcf2ebc090246cfdbb0/packages/react-native/Libraries/LogBox/Data/LogBoxData.js#L338) 来更改此行为。 -:::info -忽略日志只应作为最后的手段。请记得给自己创建任务或者注释，提醒自己修复任何被忽略的日志。 ::: -```jsx -import {LogBox} from 'react-native'; - -// 根据字符串匹配来忽略日志信息 -LogBox.ignoreLogs(['Warning: ...']); - -// 忽略所有日志信息 -LogBox.ignoreAllLogs(); -``` - -### 语法错误 - -当发生 JavaScript 语法错误时，LogBox 将显示错误的位置。在这种状态下，LogBox 无法关闭，因为无法执行您的代码。一旦语法错误被修复，LogBox 将自动关闭 - 无论是通过快速刷新还是手动重新加载。 +
## 性能监视器 -在 Android 和 iOS 上，在开发过程中可以通过在开发菜单中选择 **"Perf Monitor"** 来切换应用内性能叠加。有关此功能的更多信息，请参阅[此处](/docs/performance)。 +在 Android 和 iOS 上，开发期间可以通过在开发者菜单中选择 **"Perf Monitor"** 来切换应用内性能叠加层。有关此功能的更多信息，请参阅[这里](/docs/performance)。 -![iOS和Android上的性能监视器叠加](/docs/assets/debugging-performance-monitor.jpg) +![iOS 和 Android 上的性能监视器叠加层](/docs/assets/debugging-performance-monitor.jpg) :::info -性能监视器在应用中运行，仅作参考。我们建议使用 Android Studio 和 Xcode 中的本地性能工具来获得更准确的性能测量。 +性能监视器运行在应用内，只能作为参考。要获得准确的性能测量结果，我们建议使用 Android Studio 和 Xcode 中的原生工具。 ::: diff --git a/cndocs/handling-text-input.md b/cndocs/handling-text-input.md index 6a61ad4ba1f..67e0db5dd55 100644 --- a/cndocs/handling-text-input.md +++ b/cndocs/handling-text-input.md @@ -3,36 +3,46 @@ id: handling-text-input title: 处理文本输入 --- -[`TextInput`](textinput#content)是一个允许用户输入文本的[基础组件](intro-react-native-components)。它有一个名为`onChangeText`的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为`onSubmitEditing`的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。 +[`TextInput`](textinput#content)是一个允许用户输入文本的[基础组件](intro-react-native-components)。它有一个`onChangeText`属性，此属性接受一个函数，并会在文本每次发生变化时调用。它还有一个`onSubmitEditing`属性，此属性接受一个函数，并会在文本被提交时调用。 -假如我们要实现当用户输入时，实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球，只有一个单词： 🍕。所以"Hello there Bob"将会被翻译为"🍕🍕🍕"。 +例如，假设当用户输入时，你要把他们的话翻译成另一种语言。在这种新语言里，每一个单词都写成同样的样子：🍕。所以句子“Hello there Bob”会被翻译成“🍕 🍕 🍕”。 ```SnackPlayer name=Handling%20Text%20Input -import React, { useState } from 'react'; -import { Text, TextInput, View } from 'react-native'; +import React, {useState} from 'react'; +import {Text, TextInput, View} from 'react-native'; const PizzaTranslator = () => { const [text, setText] = useState(''); return ( - + setText(text)} + onChangeText={newText => setText(newText)} defaultValue={text} + style={{ + height: 40, + padding: 5, + marginHorizontal: 8, + borderWidth: 1, + }} /> - {text.split(' ').map((word) => word && '🍕').join(' ')} + {text + .split(' ') + .map(word => word && '🍕') + .join(' ')} ); -} +}; export default PizzaTranslator; ``` -在上面的例子里，我们把`text`保存到 state 中，因为它会随着时间变化。 +在这个例子中，我们把`text`存储在 state 中，因为它会随着时间而变化。 -文本输入方面还有很多其他的东西要处理。比如你可能想要在用户输入的时候进行验证，在[React 中的受限组件](https://doc.react-china.org/docs/forms.html#%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6)一节中有一些详细的示例（注意 react 中的 onChange 对应的是 rn 中的 onChangeText）。此外你还需要看看[TextInput 的文档](textinput.md)。 +关于文本输入，还有很多你可能想做的事情。例如，你可以在用户输入时对文本进行校验。更详细的示例请参阅 [React 关于受控组件的文档](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)，以及 [TextInput 的参考文档](textinput.md)。 -TextInput 可能是天然具有“动态状态”的最简单的组件了。下面我们来看看另一类输入组件，先从[如何处理触摸开始学习](handling-touches.md)。 +`TextInput`只是用户与你的应用交互的多种方式之一。有关处理其他输入方式的示例，请参阅[如何处理触摸](handling-touches.md)文档。 + +现在，让我们来看看另一个基础组件：[ScrollView](using-a-scrollview)。 diff --git a/cndocs/imagebackground.md b/cndocs/imagebackground.md index a2dff97ba72..97fe40f42d7 100644 --- a/cndocs/imagebackground.md +++ b/cndocs/imagebackground.md @@ -13,16 +13,19 @@ title: ImageBackground ```SnackPlayer name=ImageBackground import React from 'react'; -import {ImageBackground, StyleSheet, Text, View} from 'react-native'; +import {ImageBackground, StyleSheet, Text} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}; const App = () => ( - - - Inside - - + + + + Inside + + + ); const styles = StyleSheet.create({ @@ -68,11 +71,7 @@ export default App; ### `imageRef` -设置对内部`Image`组件的引用。 - -| 类型 | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +一个 ref 设置函数，在内部 `Image` 组件挂载时会被赋值为其 [元素节点](element-nodes)。 --- From 163bebdb48cdc5d79e779793372a62cb0029cec0 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Sat, 11 Apr 2026 00:21:50 +0800 Subject: [PATCH 3/6] =?UTF-8?q?docs(cndocs):=20=E5=90=8C=E6=AD=A5=E5=85=A5?= =?UTF-8?q?=E9=97=A8=E4=B8=8E=E8=BF=90=E8=A1=8C=E6=97=B6=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cndocs/introduction.md | 113 ++++++++++--------------------- cndocs/javascript-environment.md | 22 +++--- cndocs/keyboard.md | 4 +- 3 files changed, 49 insertions(+), 90 deletions(-) diff --git a/cndocs/introduction.md b/cndocs/introduction.md index 6947fc9c5c5..42b58fd8f4e 100644 --- a/cndocs/introduction.md +++ b/cndocs/introduction.md @@ -1,16 +1,17 @@ --- id: getting-started title: 简介 +description: 本指南将帮助你了解学习 React Native 的前置知识、如何使用本文档，以及如何搭建开发环境。 --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
- 欢迎开启 React Native 的旅程！如果你在找如何搭建环境的文档，请移步搭建开发环境。 继续往下阅读可了解关于文档结构、原生组件、React等相关的一些介绍。 - + 欢迎开启 React Native 学习之旅！如果你在寻找入门说明，它们已经移到了单独的章节。继续阅读，了解文档结构、原生组件、React 等内容！ +
-许多不同类型的人都在使用 React Native：从高级 iOS 开发人员到 React 初学者，再到职业生涯中第一次开始编程的人。这些文档是为所有学习者编写的，无论他们的经验水平或背景如何。 +许多不同类型的人都在使用 React Native：从高级 iOS 开发者，到 React 初学者，再到职业生涯中第一次开始编程的人。这些文档是为所有学习者编写的，无论他们的经验水平或背景如何。 ## 如何使用本站文档 @@ -20,115 +21,73 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con 要使用 React Native，你需要对 JavaScript 基础知识有所了解。如果你是 JavaScript 新手或需要复习，你可以在 MDN 上[深入学习](https://developer.mozilla.org/en-US/docs/Web/JavaScript)或[复习一下](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)。 -> 虽然我们尽最大努力假设读者在这之前没有太多 React、Android 或 iOS 开发的知识，但对于有抱负的 React Native 开发者来说，这些都是有价值的学习主题。我们会尽可能地提供深入了解的相关文章链接。 +:::info +虽然我们尽力假设你此前没有 React、Android 或 iOS 开发经验，但对于希望深入学习 React Native 的开发者来说，这些主题都很有价值。在合适的地方，我们也提供了更深入的参考资料和文章链接。 +::: ## 交互示例 -文档中时常会附有一些可以直接在浏览器中运行的交互示例，例如： +本简介会通过像下面这样的交互示例，让你立刻在浏览器中上手： ```SnackPlayer name=Hello%20World import React from 'react'; -import { Text, View } from 'react-native'; +import {Text, View} from 'react-native'; const YourApp = () => { return ( - - - Try editing me! 🎉 - - - ); -} - -export default YourApp; -``` - -上面的示例使用了一个叫做 Snack Player 的工具（我们也会用“沙盒环境”代指）。这是由 Expo 公司提供的专门用于演示、学习 React Native 的交互工具。它集成了 react-native-web 兼容层，会尽可能把 React Native 的代码转化为兼容的网页来运行（当然会有无法转化的情况，那种情况下则必须使用模拟器或者手机来运行）。上面的代码可以直接修改和运行，所以你可以在里面直接练习。试着改下上面示例中的文字看看效果吧！ - -> 沙盒环境通常只用于简单的演示、学习项目，它无法添加新的原生模块。所以对于正式的项目，我们建议[搭建完整的原生环境](environment-setup) 。上面的代码你也可以直接复制粘贴到完整项目的`App.js`文件中来运行。 - -## 函数式组件与 Class 组件 - -你可以在 React 中使用函数式组件或 Class 组件。最开始只有 Class 组件能够使用 state ，但自从有了 React Hooks API, 你可以为函数组件添加 state 和很多其它的功能。 - -[Hooks API 是 React Native 0.59 提供的新特性](https://zh-hans.reactjs.org/docs/hooks-intro.html), Hooks 是一种面向未来的编写 React 组件的方式，因此我们在本文档中优先使用函数组件，你也可以点击“Class 组件”切换到 Class 组件代码： - - - - -```SnackPlayer name=Hello%20World%20Function%20Component -import React from 'react'; -import { Text, View } from 'react-native'; - -const HelloWorldApp = () => { - return ( - - Hello, world! + Try editing me! 🎉 ); -} +}; -export default HelloWorldApp; +export default YourApp; ``` - - - -```SnackPlayer name=Hello%20World%20Class%20Component -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; - -class HelloWorldApp extends Component { - render() { - return ( - - Hello, world! - - ); - } -} - -export default HelloWorldApp; -``` +上面的是一个 Snack Player。这是 Expo 提供的一个便捷工具，用来嵌入并运行 React Native 项目，并展示它们在 Android 和 iOS 等平台上的渲染效果。代码是实时可编辑的，因此你可以直接在浏览器中动手试试。现在就把上面的 “Try editing me!” 改成 “Hello, world!” 吧。 - - +:::tip +如果你想在本地搭建开发环境，也可以按照我们的指南[在本机上配置开发环境](set-up-your-environment)，然后把这些代码示例粘贴到你的项目中运行。（如果你是 Web 开发者，你可能已经为移动端浏览器调试配置好了本地环境！） +::: -## 给开发者的提示 +## 开发者提示 -学习 React Native 的开发者拥有不同的开发背景，你或许有很多技术经验，包括 Android、iOS 等等，我们在编写文档的时候努力照顾到具有不同知识背景的开发者，有些时候我们会专门针对特定的平台提供特定的讲解: +许多具有不同开发背景的人都在学习 React Native。你可能有各种技术经验，包括 Web、Android、iOS 等。我们尽量为不同背景的开发者编写文档。有时我们会像下面这样，针对某个平台提供特定说明： - + - + -> Web 开发者看到的内容。 +:::info +Android 开发者可能会对这个概念比较熟悉。 +::: - + -> Android 开发者看到的内容。 +:::info +iOS 开发者可能会对这个概念比较熟悉。 +::: - + -> iOS 开发者看到的内容。 +:::info +Web 开发者可能会对这个概念比较熟悉。 +::: ## 特殊格式 -我们使用粗体字来描述菜单路径，使用“>”符号连接子菜单，比如： **Android Studio > Preferences** +菜单路径会使用粗体书写，并使用尖括号分隔子菜单。例如：**Android Studio > Preferences** --- -现在让我们开始学习 React Native 的基础知识 [核心组件与原生组件](intro-react-native-components.md). +现在你已经了解了本指南的使用方式，接下来该认识 React Native 的基础了：[原生组件](intro-react-native-components.md)。 diff --git a/cndocs/javascript-environment.md b/cndocs/javascript-environment.md index b8094742984..d18794b0a68 100644 --- a/cndocs/javascript-environment.md +++ b/cndocs/javascript-environment.md @@ -5,25 +5,23 @@ title: JavaScript 环境 import TableRow from '@site/core/TableRowWithCodeBlock'; -## JavaScript 运行时环境 +## JavaScript 运行时 -在使用 React Native 时，你的 JavaScript 代码可能会运行在三个不同的环境上： +在使用 React Native 时，你的 JavaScript 代码最多会运行在三种环境中： -- 从 React Native 0.70 版本开始，React Native 会默认使用[Hermes](hermes)引擎，它是专门为 React Native 而优化的一个新式开源 JavaScript 引擎。 -- 如果 Hermes 被禁用或是较早的 React Native 版本，则会使用[JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore)，也就是 Safari 所使用的 JavaScript 引擎。但是在 iOS 上 JavaScriptCore 并没有使用即时编译技术（JIT），因为在 iOS 中应用无权拥有可写可执行的内存页（因此无法动态生成代码）。 -- 在使用 Chrome 调试时，所有的 JavaScript 代码都运行在 Chrome 中，并且通过 WebSocket 与原生代码通信。此时的运行环境是[V8 引擎](https://v8.dev)。（社区也有提供可以在生产环境中使用的[react-native-v8](https://github.com/Kudo/react-native-v8)) +- 在大多数情况下，React Native 会使用 [Hermes](hermes)，这是一个为 React Native 优化的开源 JavaScript 引擎。 +- 如果禁用了 Hermes，React Native 会使用 [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore)，也就是 Safari 所使用的 JavaScript 引擎。请注意，在 iOS 上，JavaScriptCore 不会使用 JIT，因为 iOS 应用中没有可写且可执行的内存。 +- 在使用 Chrome 调试时，所有 JavaScript 代码都会运行在 Chrome 本身中，并通过 WebSocket 与原生代码通信。Chrome 使用 [V8](https://v8.dev/) 作为其 JavaScript 引擎。 -虽然这些环境非常类似，但开发者还是可能碰到一些不一致的地方。未来我们很可能会尝试一些其他的 JS 引擎，所以请尽量避免使用依赖于特定运行环境的代码。 - -> 常见的不一致比如有：iOS 上有部分日期构造函数未实现；Android 上重复定义的 props 可能会导致报错。 +虽然这些环境非常相似，但你最终还是可能会遇到一些不一致的情况。最好避免依赖任何特定运行时的细节。 ## JavaScript 语法转换器 语法转换器可以使编写代码的过程更加享受，因为开发者可以借助转换器直接使用新的 JavaScript 语法标准，而无需等待 JS 解释器的支持。 -React Native 内置了[Babel 转换器](https://babeljs.io)。你可以查看[Babel 的文档](https://babeljs.io/docs/plugins/#transform-plugins)来了解有关它可以转换的语法的详情。 +React Native 内置了 [Babel JavaScript 编译器](https://babeljs.io)。你可以查看 [Babel 文档](https://babeljs.io/docs/plugins/#transform-plugins) 了解它所支持的转换的更多细节。 -在[metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset)中可以看到目前 React Native 默认开启的语法转换特性。注：若想学习相关语法，译者推荐阮一峰老师的[《ECMAScript 6 入门》](http://es6.ruanyifeng.com/)。 +React Native 启用的完整转换列表可以在 [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset) 中找到。 @@ -73,7 +71,7 @@ React Native 内置了[Babel 转换器](https://babeljs.io)。你可以查看[Ba - + @@ -87,7 +85,7 @@ React Native 内置了[Babel 转换器](https://babeljs.io)。你可以查看[Ba #### 浏览器 - [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html) -- `md [console.{log, warn, error, info, trace, table, group, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)` +- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)` - [`XMLHttpRequest`, `fetch`](network.md#content) - [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content) diff --git a/cndocs/keyboard.md b/cndocs/keyboard.md index 367be23a9f6..fb61ce487f5 100644 --- a/cndocs/keyboard.md +++ b/cndocs/keyboard.md @@ -102,7 +102,9 @@ static addListener: ( - `keyboardWillChangeFrame` - `keyboardDidChangeFrame` -> 注意在 Android 上只有`keyboardDidShow`和`keyboardDidHide`事件有效。如果 Android 版本小于等于 10， 且`android:windowSoftInputMode`设置为`adjustNothing`，则没有任何事件有效。 +:::note +在 Android 上，只有 `keyboardDidShow` 和 `keyboardDidHide` 事件可用。如果你的 activity 将 `android:windowSoftInputMode` 设置为 `adjustResize` 或 `adjustNothing`，那么在 Android 10 及以下版本中，这些事件不会触发。 +::: --- From c54cc403823b77fd0524f14ad314ab1ba6b41928 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Sat, 11 Apr 2026 01:04:38 +0800 Subject: [PATCH 4/6] =?UTF-8?q?docs(cndocs):=20=E5=90=8C=E6=AD=A5=E6=9B=B4?= =?UTF-8?q?=E5=A4=9A=E8=B5=84=E6=BA=90=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cndocs/more-resources.md | 47 ++++++++++++++++++++++------------------ 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/cndocs/more-resources.md b/cndocs/more-resources.md index afb3f205a78..cc09f5e50a9 100644 --- a/cndocs/more-resources.md +++ b/cndocs/more-resources.md @@ -3,40 +3,45 @@ id: more-resources title: 其他参考资源 --- -如果你耐心的读完并理解了本网站上的所有文档，那么你应该已经可以编写一个像样的 React Native 应用了。但是 React Native 并不全是某一家公司的作品——它汇聚了成千上万开源社区开发者的智慧结晶。如果你想深入研究 React Native，那么建议不要错过下面这些参考资源。 +如果你想继续深入学习，还有很多内容值得探索：开发工作流、发布到应用商店、国际化、安全性等等。 -## 常用的第三方库 +## 接下来可以看什么 -如果你正在使用 React Native，那你应该已经对[React](https://facebook.github.io/react/)有一定的了解了。React 是基础中的基础所以我其实不太好意思提这个——但是，如果不幸你属于“但是”，那么请一定先了解下 React，它也非常适合编写现代化的网站。 +- [搭建开发环境](environment-setup) +- [搭建开发工作流](running-on-device) +- [设计和布局你的应用](flexbox) +- [调试你的应用](debugging) +- [让你的应用支持跨平台](platform-specific-code) +- [参与 React Native 社区](/community/overview) -开发实践中的一个常见问题就是如何管理应用的“状态（state）”。这方面目前最流行的库非[Redux](http://redux.js.org/)莫属了。不要被 Redux 中经常出现的类似"reducer"这样的概念术语给吓住了——它其实是个很简单的库，网上也有很多优秀的[视频教程（英文）](https://egghead.io/courses/getting-started-with-redux) 。 +## 深入学习 -如果你在寻找具有某个特定功能的第三方库，那么可以看看别人[精心整理的资源列表](https://github.com/jondot/awesome-react-native)。这里还有个类似的[中文资源列表](https://github.com/reactnativecn/react-native-guide)。 +- [React 官方文档](https://react.dev/learn) +- [MDN 的 JavaScript 教程、参考资料与指南](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Android](https://developer.android.com/docs) 和 [iOS](https://developer.apple.com/documentation/uikit) 平台文档 -更重要的技能是学会在 github 上搜索。比如你需要搜索`视频`相关的库，那么可以在 github 中搜索`react native video`。 +## IDE -## 开发工具 +我们推荐使用 [VS Code](https://code.visualstudio.com/) 编辑器，以及它方便好用的 [React Native 工具](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)。 -[VS Code](https://code.visualstudio.com/)是目前非常受 JS 开发者欢迎的 IDE 工具。 +## 可尝试的平台 -[Ignite](https://github.com/infinitered/ignite)是一套整合了 Redux 以及一些常见 UI 组件的脚手架。它带有一个命令行可以生成 app、组件或是容器。如果你喜欢它的选择搭配，那么不妨一试。 +[Expo](https://docs.expo.dev/) 是一套面向 React Native 的工具与服务框架，重点帮助你构建、发布并持续迭代应用，支持类似 Web 开发中常见的预览部署工作流，并能够自动化你的开发流程。Expo 还使你可以在完全不接触 Xcode 或 Android Studio 的情况下构建 React Native 应用；如果你想使用这些工具，它也不会造成阻碍。 -[App Center](https://appcenter.ms/)是由微软提供的热更新服务。热更新可以使你绕过 AppStore 的审核机制，直接修改已经上架的应用。对于国内用户，我们也推荐由本网站提供的[Pushy](https://pushy.reactnative.cn)热更新服务，相比 CodePush 来说，提供了全中文的文档和技术支持，服务器部署在国内速度更快，还提供了全自动的差量更新方式，大幅节约更新流量，欢迎朋友们试用和反馈意见！ +[Ignite](https://github.com/infinitered/ignite) 是一个包含多套 React Native 样板工程的入门 CLI。最新版本 Ignite Maverick 使用 MobX-State-Tree 进行状态管理，并集成了 React Navigation 及其他常用库。它内置用于生成 screen、model 等内容的生成器，并且开箱即支持 Expo。Ignite 还附带一个适合自定义设计、主题支持和测试的组件库。如果你正在寻找一套预先配置好的技术栈，Ignite 可能会非常适合你。 -[Expo](https://docs.expo.io)是一套沙盒开发环境，还带有一个已上架的空应用容器。这样你可以在没有原生开发平台（Xcode 或是 Android Studio）的情况下直接编写 React Native 应用（当然这样你只能写 js 部分代码而没法写原生代码）。 +## 示例应用 -[Yoga](https://yogalayout.com/)是一个独立的布局引擎。它并不局限于 React Native，高度优化的开源布局引擎能让产品工程师为多个平台快速构建布局。该引擎在设计时考虑了速度、大小和易用性。 +你可以试试 [Showcase](https://reactnative.dev/showcase) 里的应用，看看 React Native 能做到什么！如果你想更亲自动手一些，也可以看看 GitHub 上这组[示例应用](https://github.com/ReactNativeNews/React-Native-Apps)。你可以直接阅读它们的源码——也可以尝试在模拟器或真机上运行其中一个。 -[Bugsnag](https://www.bugsnag.com/), [Microsoft App Center](https://appcenter.ms/), 以及[Sentry](https://sentry.io/welcome/)都为 React 和 React Native 应用程序提供了出色的崩溃和错误监控服务。通过这些服务，你可以实时主动监控应用程序上发生的崩溃和问题，以便快速修复它们并改善用户体验。 +## 查找、创建并分享你自己的 Native Components 和 TurboModules -## React Native 的交流社区 +React Native 拥有一个由成千上万像你一样的开发者组成的社区，他们在持续创作内容、工具、教程——以及 Native Components！ -React Native 社区 Facebook[群组](https://www.facebook.com/groups/react.native.community)拥有数千名开发人员，而且非常活跃。来这里展示你的项目，或者询问其他人是如何解决类似问题的。 +如果你在 Core Components 中找不到自己需要的内容，可以访问 [React Native Directory](https://reactnative.directory) 看看社区已经创建了哪些内容。 -[Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n)是一个 Discord 聊天，有着很多与 React 相关的讨论，包括 React Native。Discord 就和 Slack 一样，只是它更适用于拥有无数贡献者的开源项目。请查看#react-native 频道。 +:::caution +本文档引用的是一套旧版 API，目前需要更新以反映新架构（New Architecture）。 +::: -React[推特账户](https://twitter.com/reactjs)涵盖 React 和 React Native。关注 React Native[推特账户](https://twitter.com/reactnative)和[博客](https://reactnative.dev/blog)，聚焦 React Native 的当下。 - -世界各地有很多React Native[聚会](http://www.meetup.com/topics/react-native/)。在 React 聚会中通常也有 React Native 内容。 - -有时我们会有 React 会议。我们发布了[React.js Conf 2017](https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0)和[React.js Conf 2016](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY)的视频，未来我们可能还会举办更多会议，敬请关注。您还可以在[此处](http://www.awesome-react-native.com/#conferences)找到专门的 React Native 会议列表。 +想自己创建 Native Component 或 Module 吗？为自己的使用场景编写模块，并通过 NPM 和 GitHub 与他人分享，有助于壮大 React Native 的生态与社区！可以阅读以下指南来创建你自己的 Native Modules（[Android](legacy/native-modules-android.md)、[iOS](legacy/native-modules-ios.md)）以及 Native Components（[Android](legacy/native-components-android.md)、[iOS](legacy/native-components-ios.md)）。 From 2fbf4ac5cc3881ae61e1a92fdadea349b8f9ebca Mon Sep 17 00:00:00 2001 From: "coderabbitai[bot]" <136622811+coderabbitai[bot]@users.noreply.github.com> Date: Sun, 12 Apr 2026 08:46:46 +0000 Subject: [PATCH 5/6] fix: apply CodeRabbit auto-fixes Fixed 1 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit --- cndocs/imagebackground.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cndocs/imagebackground.md b/cndocs/imagebackground.md index 97fe40f42d7..1c6c659155f 100644 --- a/cndocs/imagebackground.md +++ b/cndocs/imagebackground.md @@ -11,7 +11,7 @@ title: ImageBackground ## 示例 -```SnackPlayer name=ImageBackground +```SnackPlayer name=ImageBackground&dependencies=react-native-safe-area-context import React from 'react'; import {ImageBackground, StyleSheet, Text} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -79,4 +79,4 @@ export default App; | 类型 | | --------------------------------- | -| [View Style](view-style-props.md) | +| [View Style](view-style-props.md) | \ No newline at end of file From a0e556e16bfd9a8cd5633690d35925f61c6a0e28 Mon Sep 17 00:00:00 2001 From: "coderabbitai[bot]" <136622811+coderabbitai[bot]@users.noreply.github.com> Date: Sun, 12 Apr 2026 09:17:30 +0000 Subject: [PATCH 6/6] fix: apply CodeRabbit auto-fixes Fixed 2 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit --- cndocs/more-resources.md | 2 +- package.json | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/cndocs/more-resources.md b/cndocs/more-resources.md index cc09f5e50a9..887ff0421c5 100644 --- a/cndocs/more-resources.md +++ b/cndocs/more-resources.md @@ -44,4 +44,4 @@ React Native 拥有一个由成千上万像你一样的开发者组成的社区 本文档引用的是一套旧版 API，目前需要更新以反映新架构（New Architecture）。 ::: -想自己创建 Native Component 或 Module 吗？为自己的使用场景编写模块，并通过 NPM 和 GitHub 与他人分享，有助于壮大 React Native 的生态与社区！可以阅读以下指南来创建你自己的 Native Modules（[Android](legacy/native-modules-android.md)、[iOS](legacy/native-modules-ios.md)）以及 Native Components（[Android](legacy/native-components-android.md)、[iOS](legacy/native-components-ios.md)）。 +想自己创建 Native Component 或 Module 吗？为自己的使用场景编写模块，并通过 NPM 和 GitHub 与他人分享，有助于壮大 React Native 的生态与社区！可以阅读以下指南来创建你自己的 Native Modules（[Android](legacy/native-modules-android)、[iOS](legacy/native-modules-ios)）以及 Native Components（[Android](legacy/native-components-android)、[iOS](legacy/native-components-ios)）。 \ No newline at end of file diff --git a/package.json b/package.json index 519346ceb92..205f077fd5a 100644 --- a/package.json +++ b/package.json @@ -46,9 +46,8 @@ "typescript": "^5.9.3", "typescript-eslint": "^8.57.1" }, - "packageManager": "yarn@4.13.0", "resolutions": { "serialize-javascript": "^7.0.3", "serve-handler/minimatch": "3.1.4" } -} +} \ No newline at end of file