diff --git a/cndocs/_integration-with-existing-apps-ios.md b/cndocs/_integration-with-existing-apps-ios.md index 583b42fd8ad..c30aa551c88 100644 --- a/cndocs/_integration-with-existing-apps-ios.md +++ b/cndocs/_integration-with-existing-apps-ios.md @@ -159,7 +159,6 @@ AppRegistry.registerComponent('HelloWorld', () => App); 让我们创建一个 `App.tsx` 文件。这是一个 [TypeScript](https://www.typescriptlang.org/) 文件，可以包含 [JSX]() 表达式。它包含我们要集成到 iOS 应用程序中的根 React Native 组件（链接）： ```tsx -import React from 'react'; import { SafeAreaView, ScrollView, diff --git a/cndocs/_integration-with-existing-apps-kotlin.md b/cndocs/_integration-with-existing-apps-kotlin.md index 2de2132360a..89122650714 100644 --- a/cndocs/_integration-with-existing-apps-kotlin.md +++ b/cndocs/_integration-with-existing-apps-kotlin.md @@ -119,7 +119,7 @@ dependencies { } +react { -+ // 启用自动链接需要添加以下行，参考： https://github.com/react-native-community/cli/blob/master/docs/autolinking.md ++ // 启用自动链接需要添加以下行，参考： https://github.com/react-native-community/cli/blob/main/docs/autolinking.md + autolinkLibrariesWithApp() +} ``` @@ -193,7 +193,6 @@ AppRegistry.registerComponent('HelloWorld', () => App); 下面我们创建一个 `App.tsx` 文件。这是一个 [TypeScript](https://www.typescriptlang.org/) 文件，可以包含 [JSX]() 表达式。它包含了我们将在 Android 应用中集成的根 React Native 组件（链接）： ```tsx -import React from 'react'; import { SafeAreaView, ScrollView, diff --git a/cndocs/accessibilityinfo.md b/cndocs/accessibilityinfo.md index f3395725bd2..34226d56f01 100644 --- a/cndocs/accessibilityinfo.md +++ b/cndocs/accessibilityinfo.md @@ -8,7 +8,7 @@ title: AccessibilityInfo ## 示例 ```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios -import React, {useState, useEffect} from 'react'; +import {useState, useEffect} from 'react'; import {AccessibilityInfo, Text, StyleSheet} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -90,16 +90,16 @@ static addEventListener( 添加事件处理函数。支持的事件如下： -| 事件名 | 说明 | -| -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `accessibilityServiceChanged`
Android
| 当 TalkBack、其他 Android 辅助技术或第三方无障碍服务被启用时触发。处理函数参数为布尔值：当任一无障碍服务启用时为 `true`，否则为 `false`。 | -| `announcementFinished`
iOS
| 当读屏器完成播报时触发。处理函数参数是一个对象，包含： | -| `boldTextChanged`
iOS
| 当“粗体文本”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | -| `grayscaleChanged`
iOS
| 当“灰度”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | -| `invertColorsChanged`
iOS
| 当“反转颜色”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | -| `reduceMotionChanged` | 当“减少动态效果”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。（在 Android 上，“开发者选项”中的“过渡动画比例”设为“动画关闭”也会返回 `true`。） | -| `reduceTransparencyChanged`
iOS
| 当“降低透明度”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | -| `screenReaderChanged` | 当读屏器状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| 事件名 | 说明 | +| ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityServiceChanged`
Android
| 当 TalkBack、其他 Android 辅助技术或第三方无障碍服务被启用时触发。处理函数参数为布尔值：当任一无障碍服务启用时为 `true`，否则为 `false`。 | +| `announcementFinished`
iOS
| 当读屏器完成播报时触发。处理函数参数是一个对象，包含： | +| `boldTextChanged`
iOS
| 当“粗体文本”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| `grayscaleChanged`
iOS
| 当“灰度”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| `invertColorsChanged`
iOS
| 当“反转颜色”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| `reduceMotionChanged` | 当“减少动态效果”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。（在 Android 上，“开发者选项”中的“过渡动画比例”设为“动画关闭”也会返回 `true`。） | +| `reduceTransparencyChanged`
iOS
| 当“降低透明度”开关状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | +| `screenReaderChanged` | 当读屏器状态变化时触发。参数为布尔值：启用为 `true`，否则为 `false`。 | --- @@ -126,10 +126,10 @@ static announceForAccessibilityWithOptions( **参数：** -| 名称 | 类型 | 说明 | -| ----------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- | -| announcement
Required
| string | 要播报的字符串 | -| options
Required
| object | `queue` - 是否排队到当前播报之后
iOS
| +| 名称 | 类型 | 说明 | +| ----------------------------------------------------------------- | ------ | --------------------------------------------------------------------- | +| announcement
Required
| string | 要播报的字符串 | +| options
Required
| object | `queue` - 是否排队到当前播报之后
iOS
| --- @@ -144,9 +144,9 @@ static getRecommendedTimeoutMillis(originalTimeout: number): Promise; **参数：** -| 名称 | 类型 | 说明 | -| -------------------------------------------------------------------- | ------ | ---------------------------------------------------------------------------------------- | -| originalTimeout
Required
| number | 当“辅助功能超时”未设置时返回的超时值（毫秒）。 | +| 名称 | 类型 | 说明 | +| -------------------------------------------------------------------- | ------ | ---------------------------------------------- | +| originalTimeout
Required
| number | 当“辅助功能超时”未设置时返回的超时值（毫秒）。 | --- @@ -287,7 +287,7 @@ static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventT 确保希望接收无障碍焦点的 `View` 设置了 `accessible={true}`。 ::: -| 名称 | 类型 | 说明 | -| -------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------- | -| host
Required
| HostInstance | 要向其发送事件的组件 ref。 | +| 名称 | 类型 | 说明 | +| -------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- | +| host
Required
| HostInstance | 要向其发送事件的组件 ref。 | | eventType
Required
| AccessibilityEventTypes | `'click'`（仅 Android）、`'focus'`、`'viewHoverEnter'`（仅 Android）或 `'windowStateChange'`（仅 Android）之一 | diff --git a/cndocs/actionsheetios.md b/cndocs/actionsheetios.md index f08a31d818f..af5e959d836 100644 --- a/cndocs/actionsheetios.md +++ b/cndocs/actionsheetios.md @@ -8,7 +8,7 @@ title: ActionSheetIOS ## 示例 ```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios -import React, {useState} from 'react'; +import {useState} from 'react'; import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; diff --git a/cndocs/activityindicator.md b/cndocs/activityindicator.md index 2ab94c2a6fe..67e23704d72 100644 --- a/cndocs/activityindicator.md +++ b/cndocs/activityindicator.md @@ -8,7 +8,6 @@ title: ActivityIndicator ## 示例 ```SnackPlayer name=ActivityIndicator%20Example -import React from 'react'; import {ActivityIndicator, StyleSheet} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -62,8 +61,8 @@ export default App; 滚轮的前景颜色。 -| 类型 | 默认值 | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 类型 | 默认值 | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [color](colors) | `null`（系统默认强调色）
Android
`'#999999'`
iOS
| --- diff --git a/cndocs/alert.md b/cndocs/alert.md index 999ef8a7df9..4a86c3b19e2 100644 --- a/cndocs/alert.md +++ b/cndocs/alert.md @@ -12,7 +12,6 @@ title: Alert ## 示例 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android -import React from 'react'; import {StyleSheet, Button, Alert} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -81,7 +80,6 @@ export default App; ### 示例
Android
```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android -import React from 'react'; import {StyleSheet, Button, Alert} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -143,12 +141,12 @@ static alert ( **参数：** -| 名称 | 类型 | 说明 | -| ---------------------------------------------------------- | ---------------------------------- | ------------------------------------------------ | -| title
Required
| string | 对话框标题。传入 `null` 或空字符串将隐藏标题。 | -| message | string | 可选消息，显示在标题下方。 | -| buttons | [AlertButton](alert#alertbutton)[] | 可选的按钮配置数组。 | -| options | [AlertOptions](alert#alertoptions) | 可选的 Alert 配置。 | +| 名称 | 类型 | 说明 | +| ---------------------------------------------------------- | ---------------------------------- | ---------------------------------------------- | +| title
Required
| string | 对话框标题。传入 `null` 或空字符串将隐藏标题。 | +| message | string | 可选消息，显示在标题下方。 | +| buttons | [AlertButton](alert#alertbutton)[] | 可选的按钮配置数组。 | +| options | [AlertOptions](alert#alertoptions) | 可选的 Alert 配置。 | --- @@ -169,15 +167,15 @@ static prompt: ( **参数：** -| 名称 | 类型 | 说明 | -| ---------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| title
Required
| string | 对话框标题。 | -| message | string | 可选消息，显示在文本输入框上方。 | -| callbackOrButtons | function
[AlertButton](alert#alertButton)[] | 如果传入函数，用户点击"确定"时将以输入值为参数调用该函数
`(text: string) => void`。
如果传入数组，则按照数组内容配置按钮。 | -| type | [AlertType](alert#alerttype-ios) | 配置文本输入框的类型。 | -| defaultValue | string | 文本输入框中的默认文本。 | -| keyboardType | string | 第一个文本输入框（如果存在）的键盘类型。参见 TextInput 的 [keyboardTypes](textinput#keyboardtype)。 | -| options | [AlertOptions](alert#alertoptions) | 可选的 Alert 配置。 | +| 名称 | 类型 | 说明 | +| ---------------------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| title
Required
| string | 对话框标题。 | +| message | string | 可选消息，显示在文本输入框上方。 | +| callbackOrButtons | function
[AlertButton](alert#alertButton)[] | 如果传入函数，用户点击"确定"时将以输入值为参数调用该函数
`(text: string) => void`。
如果传入数组，则按照数组内容配置按钮。 | +| type | [AlertType](alert#alerttype-ios) | 配置文本输入框的类型。 | +| defaultValue | string | 文本输入框中的默认文本。 | +| keyboardType | string | 第一个文本输入框（如果存在）的键盘类型。参见 TextInput 的 [keyboardTypes](textinput#keyboardtype)。 | +| options | [AlertOptions](alert#alertoptions) | 可选的 Alert 配置。 | --- @@ -193,10 +191,10 @@ iOS Alert 的按钮样式。 **常量：** -| 值 | 说明 | -| --------------- | -------------- | -| `'default'` | 默认按钮样式。 | -| `'cancel'` | 取消按钮样式。 | +| 值 | 说明 | +| --------------- | ---------------- | +| `'default'` | 默认按钮样式。 | +| `'cancel'` | 取消按钮样式。 | | `'destructive'` | 破坏性按钮样式。 | --- @@ -211,11 +209,11 @@ iOS Alert 的类型。 **常量：** -| 值 | 说明 | -| ------------------ | ---------------------- | -| `'default'` | 不带输入框的默认提示框 | -| `'plain-text'` | 带纯文本输入框的提示框 | -| `'secure-text'` | 带密文输入框的提示框 | +| 值 | 说明 | +| ------------------ | -------------------------- | +| `'default'` | 不带输入框的默认提示框 | +| `'plain-text'` | 带纯文本输入框的提示框 | +| `'secure-text'` | 带密文输入框的提示框 | | `'login-password'` | 带用户名密码输入框的提示框 | --- @@ -230,12 +228,12 @@ iOS Alert 的类型。 **对象属性：** -| 名称 | 类型 | 说明 | -| ------------------------------------------------ | ---------------------------------------------- | -------------------------------------------------------- | -| text | string | 按钮标签。 | -| onPress | function | 按钮被点击时的回调函数。 | -| style
iOS
| [AlertButtonStyle](alert#alertbuttonstyle-ios) | 按钮样式，在 Android 上此属性将被忽略。 | -| isPreferred
iOS
| boolean | 是否为强调按钮，在 Android 上此属性将被忽略。 | +| 名称 | 类型 | 说明 | +| ------------------------------------------------ | ---------------------------------------------- | --------------------------------------------- | +| text | string | 按钮标签。 | +| onPress | function | 按钮被点击时的回调函数。 | +| style
iOS
| [AlertButtonStyle](alert#alertbuttonstyle-ios) | 按钮样式，在 Android 上此属性将被忽略。 | +| isPreferred
iOS
| boolean | 是否为强调按钮，在 Android 上此属性将被忽略。 | --- @@ -247,8 +245,8 @@ iOS Alert 的类型。 **属性：** -| 名称 | 类型 | 说明 | -| ------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------- | -| cancelable
Android
| boolean | 是否允许通过点击提示框外部区域来关闭提示框。 | -| userInterfaceStyle
iOS
| string | 提示框的界面样式，可以设置为 `light` 或 `dark`，否则将使用默认的系统样式。 | -| onDismiss
Android
| function | 提示框被关闭时触发的回调函数。 | +| 名称 | 类型 | 说明 | +| ------------------------------------------------------- | -------- | -------------------------------------------------------------------------- | +| cancelable
Android
| boolean | 是否允许通过点击提示框外部区域来关闭提示框。 | +| userInterfaceStyle
iOS
| string | 提示框的界面样式，可以设置为 `light` 或 `dark`，否则将使用默认的系统样式。 | +| onDismiss
Android
| function | 提示框被关闭时触发的回调函数。 | diff --git a/cndocs/animated.md b/cndocs/animated.md index cad9a6a3adc..9f1b4312293 100644 --- a/cndocs/animated.md +++ b/cndocs/animated.md @@ -16,7 +16,6 @@ title: Animated 下面示例包含一个 `View`，它会根据动画值 `fadeAnim` 淡入和淡出。 ```SnackPlayer name=Animated%20Example -import React from 'react'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; import { Animated, @@ -475,9 +474,9 @@ static start(callback?: (result: {finished: boolean}) => void); **参数：** -| 名称 | 类型 | 必填 | 说明 | -| -------- | --------------------------------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------- | -| callback | `(result: {finished: boolean}) => void` | 否 | 动画正常结束后，或动画在完成前被 `stop()` 中断后调用的回调函数。 | +| 名称 | 类型 | 必填 | 说明 | +| -------- | --------------------------------------- | ---- | ---------------------------------------------------------------- | +| callback | `(result: {finished: boolean}) => void` | 否 | 动画正常结束后，或动画在完成前被 `stop()` 中断后调用的回调函数。 | 带回调的启动示例： diff --git a/cndocs/animatedvaluexy.md b/cndocs/animatedvaluexy.md index 3e006f673f2..3fca29425f2 100644 --- a/cndocs/animatedvaluexy.md +++ b/cndocs/animatedvaluexy.md @@ -5,10 +5,10 @@ title: Animated.ValueXY 用于驱动 2D 动画的 2D 值，例如平移手势。与普通的 [`Animated.Value`](animatedvalue) 几乎相同的 API，但是是多路复用的。包含两个常规的“Animated.Value”。 -＃＃ 例子 +## 例子 ```SnackPlayer name=Animated.ValueXY%20Example -import React, {useRef} from 'react'; +import {useRef} from 'react'; import {Animated, PanResponder, StyleSheet} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -63,9 +63,9 @@ export default DraggableView; --- -＃ 参考 +# 参考 -＃＃ 方法 +## 方法 ### `setValue()` @@ -77,9 +77,9 @@ setValue(value: {x: number; y: number}); **参数：** -|名称 |类型 |必填|描述 | -| -----| ------------------------ | -------- | ----------- | -|价值| `{x：数字； y: 数字}` |是的 |价值| +| 名称 | 类型 | 必填 | 描述 | +| ---- | --------------------- | ---- | ---- | +| 价值 | `{x：数字； y: 数字}` | 是的 | 价值 | --- @@ -93,9 +93,9 @@ setOffset(offset: {x: number; y: number}); **参数：** -|名称 |类型 |必填|描述 | -| ------ | ------------------------ | -------- | ------------ | -|偏移| `{x：数字； y: 数字}` |是的 |偏移值| +| 名称 | 类型 | 必填 | 描述 | +| ---- | --------------------- | ---- | ------ | +| 偏移 | `{x：数字； y: 数字}` | 是的 | 偏移值 | --- @@ -131,9 +131,9 @@ addListener(callback: (value: {x: number; y: number}) => void); **参数：** -|名称 |类型 |必填|描述 | -| -------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------- | -|回调 |功能|是的 |回调函数将接收一个对象，该对象的“value”键设置为新值。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ---- | ---- | ----------------------------------------------------- | +| 回调 | 功能 | 是的 | 回调函数将接收一个对象，该对象的“value”键设置为新值。 | --- @@ -147,9 +147,9 @@ removeListener(id: string); **参数：** -|名称 |类型 |必填|描述 | -| ---- | ------ | -------- | ---------------------------------- | -|编号 |字符串|是的 |正在删除的侦听器的 ID。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ----------------------- | +| 编号 | 字符串 | 是的 | 正在删除的侦听器的 ID。 | --- @@ -173,9 +173,9 @@ stopAnimation(callback?: (value: {x: number; y: number}) => void); **参数：** -|名称 |类型 |必填|描述 | -| -------- | -------- | -------- | -------------------------------------------------------- | -|回调 |功能|没有 |将接收最终值的函数。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ---- | ---- | -------------------- | +| 回调 | 功能 | 没有 | 将接收最终值的函数。 | --- @@ -189,9 +189,9 @@ resetAnimation(callback?: (value: {x: number; y: number}) => void); **参数：** -|名称 |类型 |必填|描述 | -| -------- | -------- | -------- | ------------------------------------------------ | -|回调 |功能|没有 |将接收原始值的函数。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ---- | ---- | -------------------- | +| 回调 | 功能 | 没有 | 将接收原始值的函数。 | --- diff --git a/cndocs/animations.md b/cndocs/animations.md index eb6e6f38d3a..f6aea5143bb 100644 --- a/cndocs/animations.md +++ b/cndocs/animations.md @@ -21,7 +21,7 @@ React Native 提供了两个互补的动画系统：[`Animated`](animations#anim ```SnackPlayer ext=js -import React, {useEffect, useRef} from 'react'; +import {useEffect, useRef} from 'react'; import {Animated, Text, View} from 'react-native'; const FadeInView = props => { @@ -74,7 +74,7 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {useEffect, useRef, type PropsWithChildren} from 'react'; import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; @@ -309,7 +309,6 @@ Animated.timing(opacity, { #### 带有动画事件的 ScrollView 示例 ```SnackPlayer name=Animated&supportedPlatforms=ios,android -import React from 'react'; import { ScrollView, Text, @@ -452,7 +451,7 @@ onPanResponderMove={Animated.event( #### PanResponder 与动画事件示例 ```SnackPlayer name=Animated -import React, {useRef} from 'react'; +import {useRef} from 'react'; import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native'; const App = () => { @@ -593,7 +592,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations -import React, {useState} from 'react'; +import {useState} from 'react'; import { NativeModules, LayoutAnimation, diff --git a/cndocs/appregistry.md b/cndocs/appregistry.md index 8e1f8f02837..e88d07f0562 100644 --- a/cndocs/appregistry.md +++ b/cndocs/appregistry.md @@ -28,9 +28,9 @@ AppRegistry.registerComponent('Appname', () => App); --- -＃ 参考 +# 参考 -＃＃ 方法 +## 方法 ### `getAppKeys()` @@ -62,9 +62,9 @@ static getRunnable(appKey: string): : Runnable | undefined; **参数：** -|名称 |类型 | -| ----------------------------------------------------------- | ------ | -| appKey
必需
|字符串| +| 名称 | 类型 | +| ------------------------------------------------------- | ------ | +| appKey
必需
| 字符串 | --- @@ -102,10 +102,10 @@ static registerCancellableHeadlessTask( **参数：** -|名称 |类型 |描述 | -| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| taskKey
必填
|字符串|调用 startHeadlessTask 时使用的此任务实例的本机 ID。 | -| taskProvider
必填
| [任务提供程序](appregistry#taskprovider) |一个承诺返回函数，将从本机端传递的一些数据作为唯一的参数。当 Promise 被解决或拒绝时，本机端会收到此事件的通知，并且它可能会决定销毁 JS 上下文。 || taskCancelProvider
必填
| [TaskCancelProvider](appregistry#taskcancelprovider) |一个不带参数的 void 返回函数；当请求取消时，taskProvider 正在执行的函数应该尽快结束并返回。 | +| 名称 | 类型 | 描述 | +| --------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------- | +| taskKey
必填
| 字符串 | 调用 startHeadlessTask 时使用的此任务实例的本机 ID。 | +| taskProvider
必填
| [任务提供程序](appregistry#taskprovider) | 一个承诺返回函数，将从本机端传递的一些数据作为唯一的参数。当 Promise 被解决或拒绝时，本机端会收到此事件的通知，并且它可能会决定销毁 JS 上下文。 | | taskCancelProvider
必填
| [TaskCancelProvider](appregistry#taskcancelprovider) | 一个不带参数的 void 返回函数；当请求取消时，taskProvider 正在执行的函数应该尽快结束并返回。 | --- @@ -121,11 +121,11 @@ static registerComponent( **参数：** -|名称 |类型 | -| ---------------------------------------------------------------------------------- | ----------------- | -| appKey
必需
|字符串| -| componentProvider
必需
|组件提供者 | -|部分|布尔 | +| 名称 | 类型 | +| ------------------------------------------------------------------ | ---------- | +| appKey
必需
| 字符串 | +| componentProvider
必需
| 组件提供者 | +| 部分 | 布尔 | --- @@ -137,8 +137,8 @@ static registerConfig(config: AppConfig[]); **参数：** -|名称 |类型 | -| ----------------------------------------------------------- | ------------------------------------------------ | +| 名称 | 类型 | +| ------------------------------------------------------- | --------------------------------------- | | config
必需
| [应用程序配置](appregistry#appconfig)[] | --- @@ -158,10 +158,10 @@ static registerHeadlessTask( **参数：** -|名称 |类型 |描述 | -| --------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| taskKey
必填
|字符串|调用 startHeadlessTask 时使用的此任务实例的本机 ID。 | -| taskProvider
必填
| [任务提供程序](appregistry#taskprovider) |一个承诺返回函数，将从本机端传递的一些数据作为唯一的参数。当 Promise 被解决或拒绝时，本机端会收到此事件的通知，并且它可能会决定销毁 JS 上下文。 | +| 名称 | 类型 | 描述 | +| --------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| taskKey
必填
| 字符串 | 调用 startHeadlessTask 时使用的此任务实例的本机 ID。 | +| taskProvider
必填
| [任务提供程序](appregistry#taskprovider) | 一个承诺返回函数，将从本机端传递的一些数据作为唯一的参数。当 Promise 被解决或拒绝时，本机端会收到此事件的通知，并且它可能会决定销毁 JS 上下文。 | --- @@ -173,10 +173,10 @@ static registerRunnable(appKey: string, func: Runnable): string; **参数：** -|名称 |类型 | -| ----------------------------------------------------------- | -------- | -| appKey
必需
|字符串| -|运行
必需
|功能| +| 名称 | 类型 | +| ------------------------------------------------------- | ------ | +| appKey
必需
| 字符串 | +| 运行
必需
| 功能 | --- @@ -191,10 +191,10 @@ static registerSection( **参数：** -|名称 |类型 | -| -------------------------------------------------------------------------- | ----------------- | -| appKey
必需
|字符串| -|组件
必需
|组件提供者 | +| 名称 | 类型 | +| ------------------------------------------------------- | ---------- | +| appKey
必需
| 字符串 | +| 组件
必需
| 组件提供者 | --- @@ -208,10 +208,10 @@ static runApplication(appKey: string, appParameters: any): void; **参数：** -|名称 |类型 | -| ------------------------------------------------------------------ | ------ | -| appKey
必需
|字符串| -| appParameters
必需
|任何| +| 名称 | 类型 | +| -------------------------------------------------------------- | ------ | +| appKey
必需
| 字符串 | +| appParameters
必需
| 任何 | --- @@ -225,16 +225,16 @@ static setComponentProviderInstrumentationHook( **参数：** -|名称 |类型 | -| -------------------------------------------------------------------- | -------- | -| hook
必需
|功能| +| 名称 | 类型 | +| ----------------------------------------------------- | ---- | +| hook
必需
| 功能 | 有效的“hook”函数接受以下参数作为参数： -|名称 |类型 | -| ---------------------------------------------------------------------------------------- | ------------------ | -|组件
必需
|组件提供者 | -| scopedPerformanceLogger
必需
|性能记录器 | +| 名称 | 类型 | +| ------------------------------------------------------------------------ | ---------- | +| 组件
必需
| 组件提供者 | +| scopedPerformanceLogger
必需
| 性能记录器 | 该函数还必须返回一个 React 组件。 @@ -250,9 +250,9 @@ static setWrapperComponentProvider( **参数：** -|名称 |类型 | -| ------------------------------------------------------------------------ | ----------------- | -|提供者
必需
|组件提供者 | +| 名称 | 类型 | +| ------------------------------------------------------- | ---------- | +| 提供者
必需
| 组件提供者 | --- @@ -270,11 +270,11 @@ static startHeadlessTask( **参数：** -|名称 |类型 |描述 | -| ------------------------------------------------------------------------ | ------ | -------------------------------------------------------------------------------- | -| taskId
必填
|数量 |此任务实例的本机 ID，用于跟踪其执行情况。 | -| taskKey
必填
|字符串|任务启动的关键。 | -| data
必填
|任何|要传递给任务的数据。 | +| 名称 | 类型 | 描述 | +| -------------------------------------------------------- | ------ | ----------------------------------------- | +| taskId
必填
| 数量 | 此任务实例的本机 ID，用于跟踪其执行情况。 | +| taskKey
必填
| 字符串 | 任务启动的关键。 | +| data
必填
| 任何 | 要传递给任务的数据。 | --- @@ -288,9 +288,9 @@ static unmountApplicationComponentAtRootTag(rootTag: number); **参数：** -|名称 |类型 | -| ------------------------------------------------------------------------ | ------ | -| rootTag
必需
|数量 | +| 名称 | 类型 | +| -------------------------------------------------------- | ---- | +| rootTag
必需
| 数量 | ## 类型定义 @@ -298,18 +298,18 @@ static unmountApplicationComponentAtRootTag(rootTag: number); `registerConfig` 方法的应用程序配置。 -|类型 | -| ------ | -|对象| +| 类型 | +| ---- | +| 对象 | **特性：** -|名称 |类型 | -| ----------------------------------------------------------- | ----------------- | -| appKey
必需
|字符串| -|组件|组件提供者 | -|运行|功能| -|部分|布尔 | +| 名称 | 类型 | +| ------------------------------------------------------- | ---------- | +| appKey
必需
| 字符串 | +| 组件 | 组件提供者 | +| 运行 | 功能 | +| 部分 | 布尔 | :::注意 每个配置都应该设置“组件”或“运行”功能。 @@ -317,66 +317,66 @@ static unmountApplicationComponentAtRootTag(rootTag: number); ### 注册表 -|类型 | -| ------ | -|对象| +| 类型 | +| ---- | +| 对象 | **特性：** -|名称 |类型 | -| ---------| ------------------------------------------------------ | -|运行程序 | [Runnables](appregistry#runnable) 数组 | -|部分|字符串数组 | +| 名称 | 类型 | +| -------- | -------------------------------------- | +| 运行程序 | [Runnables](appregistry#runnable) 数组 | +| 部分 | 字符串数组 | ### 可运行 -|类型 | -| ------ | -|对象| +| 类型 | +| ---- | +| 对象 | **特性：** -|名称 |类型 | -| ---------| ----------------- | -|组件|组件提供者 | -|运行|功能| +| 名称 | 类型 | +| ---- | ---------- | +| 组件 | 组件提供者 | +| 运行 | 功能 | ### 可运行的 键为 `appKey` 且值类型为 [`Runnable`](appregistry#runnable) 的对象。 -|类型 | -| ------ | -|对象| +| 类型 | +| ---- | +| 对象 | -＃＃＃ 任务 +### 任务 “Task”是一个函数，它接受任何数据作为参数并返回一个解析为“undefined”的 Promise。 -|类型 | -| -------- | -|功能| +| 类型 | +| ---- | +| 功能 | ### 任务取消器 “TaskCanceller”是一个不接受参数并返回 void 的函数。 -|类型 | -| -------- | -|功能| +| 类型 | +| ---- | +| 功能 | ### 任务取消提供者 有效的 `TaskCancelProvider` 是一个返回 [`TaskCanceller`](appregistry#taskcanceller) 的函数。 -|类型 | -| -------- | -|功能| +| 类型 | +| ---- | +| 功能 | ### 任务提供者 有效的 `TaskProvider` 是一个返回 [`Task`](appregistry#task) 的函数。 -|类型 | -| -------- | -|功能| +| 类型 | +| ---- | +| 功能 | diff --git a/cndocs/appstate.md b/cndocs/appstate.md index 3a4b821ec7a..cc095dc8684 100644 --- a/cndocs/appstate.md +++ b/cndocs/appstate.md @@ -27,7 +27,7 @@ AppState 通常在处理推送通知的时候用来决定内容和对应的行 ::: ```SnackPlayer name=AppState%20Example -import React, {useRef, useState, useEffect} from 'react'; +import {useRef, useState, useEffect} from 'react'; import {AppState, StyleSheet, Text} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; diff --git a/cndocs/backhandler.md b/cndocs/backhandler.md index cad33a16a85..d90ac7dc341 100644 --- a/cndocs/backhandler.md +++ b/cndocs/backhandler.md @@ -14,7 +14,7 @@ Backhandler API 检测用于后退导航的硬件按钮按下情况，允许您 如果您的应用程序显示打开的“Modal”，则“BackHandler”将不会发布任何事件（[请参阅“Modal”文档](modal#onrequestclose)）。 ::: -＃＃ 图案 +## 图案 ```tsx const subscription = BackHandler.addEventListener( @@ -47,12 +47,12 @@ const subscription = BackHandler.addEventListener( subscription.remove(); ``` -＃＃ 例子 +## 例子 以下示例实现了您确认用户是否要退出应用程序的场景： ```SnackPlayer name=BackHandler&supportedPlatforms=android -import React, {useEffect} from 'react'; +import {useEffect} from 'react'; import {Text, StyleSheet, BackHandler, Alert} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -114,9 +114,9 @@ export default App; --- -＃ 参考 +# 参考 -＃＃ 方法 +## 方法 ### `addEventListener()` diff --git a/cndocs/button.md b/cndocs/button.md index 100ec847bc6..b0bd932be5c 100644 --- a/cndocs/button.md +++ b/cndocs/button.md @@ -19,7 +19,6 @@ title: Button ## 示例 ```SnackPlayer name=Button%20Example&ext=js -import React from 'react'; import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; diff --git a/cndocs/communication-android.md b/cndocs/communication-android.md index 3d935932ac1..6c969db3cfb 100644 --- a/cndocs/communication-android.md +++ b/cndocs/communication-android.md @@ -67,7 +67,6 @@ class MainActivity : ReactActivity() { ```tsx -import React from 'react'; import {View, Image} from 'react-native'; export default class ImageBrowserApp extends React.Component { diff --git a/cndocs/communication-ios.md b/cndocs/communication-ios.md index fb6331f68a0..fc8e3bde959 100644 --- a/cndocs/communication-ios.md +++ b/cndocs/communication-ios.md @@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge ``` ``` -import React from 'react'; import { View, Image @@ -195,7 +194,7 @@ typedef NS_ENUM(NSInteger, RCTRootViewSizeFlexibility) { 在例子中我们使用一个`FlexibleSizeExampleView`视图来包含根视图。我们创建了根视图，初始化并且设置了代理。代理将会处理尺寸更新。然后，我们设置根视图的弹性尺寸为`RCTRootViewSizeFlexibilityHeight`，意味着`rootViewDidChangeIntrinsicSize:`方法将会在每次 React Native 内容高度变化时进行调用。最后，我们设置根视图的宽度和位置。注意我们也设置了高度，但是并没有效果，因为我们已经将高度设置为根据 RN 内容进行弹性变化了。 -你可以在这里查看完整的例子[源代码](https://github.com/facebook/react-native/blob/master/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m)。 +你可以在这里查看完整的例子[源代码](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m)。 动态改变根视图的弹性模式是可行的。改变根视图的弹性模式将会导致布局的重新计算，并且在重新量出内容尺寸时会调用`rootViewDidChangeIntrinsicSize`方法。 diff --git a/cndocs/dimensions.md b/cndocs/dimensions.md index 63c07c58ce5..8ead0fc76d6 100644 --- a/cndocs/dimensions.md +++ b/cndocs/dimensions.md @@ -27,7 +27,7 @@ const windowHeight = Dimensions.get('window').height; ## 示例 ```SnackPlayer name=Dimensions%20Example -import React, {useState, useEffect} from 'react'; +import {useState, useEffect} from 'react'; import {StyleSheet, Text, Dimensions} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -119,9 +119,9 @@ static get(dim: 'window' | 'screen'): ScaledSize; **参数:** -| 名称 | 类型 | 描述 | -| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- | -| dim
必需
| 字符串 | 调用 `set` 时定义的尺寸的名称。返回该尺寸的值。 | +| 名称 | 类型 | 描述 | +| -------------------------------------------------------------- | ------ | ----------------------------------------------- | +| dim
必需
| 字符串 | 调用 `set` 时定义的尺寸的名称。返回该尺寸的值。 | > 对于 Android，`window` 尺寸将不包括 `状态栏`（如果不透明）和 `底部导航栏` 占用的大小。 @@ -133,16 +133,16 @@ static get(dim: 'window' | 'screen'): ScaledSize; **属性:** -| 名称 | 类型 | 描述 | -| ------ | ----------------------------------- | --------------------------------------- | -| window | [ScaledSize](dimensions#scaledsize) | 可见应用窗口的大小。 | -| screen | [ScaledSize](dimensions#scaledsize) | 设备屏幕的大小。 | +| 名称 | 类型 | 描述 | +| ------ | ----------------------------------- | -------------------- | +| window | [ScaledSize](dimensions#scaledsize) | 可见应用窗口的大小。 | +| screen | [ScaledSize](dimensions#scaledsize) | 设备屏幕的大小。 | ### ScaledSize -| 类型 | -| ------ | -| 对象 | +| 类型 | +| ---- | +| 对象 | **属性:** diff --git a/cndocs/drawerlayoutandroid.md b/cndocs/drawerlayoutandroid.md index 564218f16e8..b0e97ef4de7 100644 --- a/cndocs/drawerlayoutandroid.md +++ b/cndocs/drawerlayoutandroid.md @@ -13,7 +13,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js -import React, {useRef, useState} from 'react'; +import {useRef, useState} from 'react'; import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -86,7 +86,7 @@ export default App; ```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx -import React, {useRef, useState} from 'react'; +import {useRef, useState} from 'react'; import { Button, DrawerLayoutAndroid, diff --git a/cndocs/easing.md b/cndocs/easing.md index 31cf9a6a1b9..959028d1afa 100644 --- a/cndocs/easing.md +++ b/cndocs/easing.md @@ -49,7 +49,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ```SnackPlayer name=Easing%20Demo&ext=js -import React, {useRef} from 'react'; +import {useRef} from 'react'; import { Animated, Easing, @@ -209,7 +209,7 @@ export default App; ```SnackPlayer name=Easing%20Demo&ext=tsx -import React, {useRef} from 'react'; +import {useRef} from 'react'; import { Animated, Easing, diff --git a/cndocs/fabric-native-components.md b/cndocs/fabric-native-components.md index 4ede3f956c4..054c8721217 100644 --- a/cndocs/fabric-native-components.md +++ b/cndocs/fabric-native-components.md @@ -172,7 +172,6 @@ export default (codegenNativeComponent( 最后，你可以在应用中使用该组件。更新你的生成 `App.tsx` 文件： ```javascript title="Demo/App.tsx" -import React from 'react'; import {Alert, StyleSheet, View} from 'react-native'; import WebView from './specs/WebViewNativeComponent'; diff --git a/cndocs/flatlist.md b/cndocs/flatlist.md index 4a2c789e263..bc3502f66c4 100644 --- a/cndocs/flatlist.md +++ b/cndocs/flatlist.md @@ -26,7 +26,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ```SnackPlayer name=Simple%20FlatList%20Example&ext=js -import React from 'react'; import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -86,7 +85,6 @@ export default App; ```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx -import React from 'react'; import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -158,7 +156,7 @@ export default App; ```SnackPlayer name=flatlist-selectable&ext=js -import React, {useState} from 'react'; +import {useState} from 'react'; import { FlatList, StatusBar, @@ -242,7 +240,7 @@ export default App; ```SnackPlayer name=flatlist-selectable&ext=tsx -import React, {useState} from 'react'; +import {useState} from 'react'; import { FlatList, StatusBar, @@ -514,7 +512,7 @@ renderItem({ `getItemLayout`是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。如果你的行高是固定的，`getItemLayout`用起来就既高效又简单，类似下面这样： -```jsx +```tsx getItemLayout={(data, index) => ( {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} )} @@ -570,7 +568,7 @@ renderItem({ ### `keyExtractor` -```jsx +```tsx (item: object, index: number) => string; ``` @@ -594,7 +592,7 @@ renderItem({ ### `onEndReached` -```jsx +```tsx (info: {distanceFromEnd: number}) => void ``` @@ -618,7 +616,7 @@ renderItem({ ### `onRefresh` -```jsx +```tsx () => void ``` @@ -632,7 +630,7 @@ renderItem({ ### `onViewableItemsChanged` -```jsx +```tsx (info: { viewableItems: array, changed: array, @@ -702,7 +700,7 @@ renderItem({ Error: Changing viewabilityConfig on the fly is not supported ``` -```jsx +```tsx constructor (props) { super(props) @@ -713,7 +711,7 @@ constructor (props) { } ``` -```jsx +```tsx React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：`flexDirection`的默认值为`column`（而不是`row`），`alignContent`默认值为 `flex-start`（而不是 `stretch`）, `flexShrink` 默认值为`0` （而不是`1`）, 而`flex`只能指定一个数字值。 +:::caution +React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：`flexDirection`的默认值为`column`（而不是`row`），`alignContent`默认值为 `flex-start`（而不是 `stretch`）, `flexShrink` 默认值为`0` （而不是`1`）, 而`flex`只能指定一个数字值。 +::: -### Flex +## Flex [`flex`](layout-props#flex) 属性决定元素在主轴上如何**填满**可用区域。整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。 在下面的例子中，在设置了`flex: 1`的容器 view 中，有红色，黄色和绿色三个子 view。红色 view 设置了`flex: 1`，黄色 view 设置了`flex: 2`，绿色 view 设置了`flex: 3`。**1+2+3 = 6**，这意味着红色 view 占据整个区域的`1/6`，黄色 view 占据整个区域的`2/6`，绿色 view 占据整个区域的`3/6`。 ```SnackPlayer name=Flex%20Example -import React from "react"; import { StyleSheet, Text, View } from "react-native"; const Flex = () => { @@ -62,7 +63,7 @@ export default Flex; ```SnackPlayer name=Flex%20Direction&ext=js -import React, {useState} from 'react'; +import {useState} from 'react'; import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; const FlexDirectionBasics = () => { @@ -161,7 +162,7 @@ export default FlexDirectionBasics; ```SnackPlayer name=Flex%20Direction&ext=tsx -import React, {useState} from 'react'; +import {useState} from 'react'; import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import type {PropsWithChildren} from 'react'; @@ -279,7 +280,7 @@ export default FlexDirectionBasics; ```SnackPlayer name=Flex%20Direction&ext=js -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; const DirectionLayout = () => { @@ -378,7 +379,7 @@ export default DirectionLayout; ```SnackPlayer name=Flex%20Direction&ext=tsx -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; import type {PropsWithChildren} from 'react'; @@ -500,10 +501,10 @@ export default DirectionLayout; - `space-evenly` 在对齐容器内沿着主轴均匀分布子项。每一对相邻项、主开始边缘和第一项以及主结束边缘和最后一项之间的间距都完全相同。 -您可以在[这里](https://yogalayout.com/docs/justify-content)了解更多信息。 +您可以在[这里](https://www.yogalayout.dev/docs/styling/justify-content)了解更多信息。 ```SnackPlayer name=Justify%20Content -import React, { useState } from "react"; +import { useState } from 'react'; import { View, TouchableOpacity, Text, StyleSheet } from "react-native"; const JustifyContentBasics = () => { @@ -640,7 +641,7 @@ export default JustifyContentBasics; ```SnackPlayer name=Align%20Items&ext=js -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; const AlignItemsLayout = () => { @@ -749,7 +750,7 @@ export default AlignItemsLayout; ```SnackPlayer name=Align%20Items&ext=tsx -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; import type {PropsWithChildren} from 'react'; @@ -873,7 +874,7 @@ export default AlignItemsLayout; ```SnackPlayer name=Align%20Self&ext=js -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; const AlignSelfLayout = () => { @@ -983,7 +984,7 @@ export default AlignSelfLayout; ```SnackPlayer name=Align%20Self&ext=tsx -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; import type {PropsWithChildren} from 'react'; import type {FlexAlignType} from 'react-native'; @@ -1117,10 +1118,10 @@ export default AlignSelfLayout; - `space-around`：均匀地在容器的次轴上间隔排列换行后各个线，使剩余空间平均分布在这些线周围。相较于使用 `space-between`，使用 `space-around` 会导致空白区域被分配到第一条线和最后一条线之前及之后两端。 -您可以[点击此处](https://yogalayout.com/docs/align-content)了解更多信息。 +您可以[点击此处](https://www.yogalayout.dev/docs/styling/align-content)了解更多信息。 ```SnackPlayer name=Align%20Content -import React, { useState } from "react"; +import { useState } from 'react'; import { View, TouchableOpacity, Text, StyleSheet } from "react-native"; const AlignContentLayout = () => { @@ -1265,7 +1266,7 @@ export default AlignContentLayout; ```SnackPlayer name=Flex%20Wrap&ext=js -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; const FlexWrapLayout = () => { @@ -1368,7 +1369,7 @@ export default FlexWrapLayout; ```SnackPlayer name=Flex%20Wrap&ext=tsx -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; import type {PropsWithChildren} from 'react'; @@ -1496,7 +1497,7 @@ export default FlexWrapLayout; ```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, Text, TextInput, StyleSheet} from 'react-native'; const App = () => { @@ -1670,7 +1671,7 @@ export default App; ```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, Text, TextInput, StyleSheet} from 'react-native'; import type {ViewStyle} from 'react-native'; @@ -1869,7 +1870,7 @@ export default App; ```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, Text, StyleSheet, TextInput} from 'react-native'; const RowGapAndColumnGap = () => { @@ -1971,7 +1972,7 @@ export default RowGapAndColumnGap; ```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx -import React, {useState} from 'react'; +import {useState} from 'react'; import {View, Text, StyleSheet, TextInput} from 'react-native'; import type {PropsWithChildren} from 'react'; @@ -2093,14 +2094,9 @@ export default RowGapAndColumnGap; - `percentage`分别以父级宽度或高度的百分比定义宽度或高度。 ```SnackPlayer name=Width%20and%20Height -import React, { useState } from "react"; -import { - View, - SafeAreaView, - TouchableOpacity, - Text, - StyleSheet, -} from "react-native"; +import {useState} from 'react'; +import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const WidthHeightBasics = () => { const [widthType, setWidthType] = useState("auto"); @@ -2156,7 +2152,8 @@ const PreviewLayout = ({ setWidthType, setHeightType, }) => ( - + + width {widthValues.map((value) => ( @@ -2178,7 +2175,8 @@ const PreviewLayout = ({ ))} - + + height {heightValues.map((value) => ( @@ -2247,21 +2245,18 @@ export default WidthHeightBasics; ## 绝对与相对定位 -`position` 类型定义了元素在其父元素中的定位方式。 +`position` 类型定义了元素相对于其自身、其父元素或其[包含块](./flexbox.md#包含块)的定位方式。 - `relative`（**默认值**） 默认情况下，一个元素是相对定位的。这意味着一个元素根据布局的正常流程进行定位，然后根据 `top`、`right`、`bottom` 和 `left` 的值进行偏移。该偏移不会影响任何兄弟或父级元素的位置。 - `absolute` 绝对定位时，一个元素不参与正常布局流程。它独立于其兄弟元素进行布局。位置是基于 `top`, `right`, `bottom`, 和 'left' 值来确定的。 +- `static` 静态定位时，元素按照正常的布局流程定位，会忽略 `top`、`right`、`bottom` 和 `left` 的值。此 `position` 还会导致该元素不会成为绝对定位后代的包含块，除非存在其他更优先的样式属性（例如 `transform`）。这允许 `absolute` 元素相对于非其父元素进行定位。注意 **`static` 仅在新架构（New Architecture）中可用**。 + ```SnackPlayer name=Absolute%20%26%20Relative%20Layout -import React, { useState } from "react"; -import { - View, - SafeAreaView, - TouchableOpacity, - Text, - StyleSheet, -} from "react-native"; +import {useState} from 'react'; +import {View, TouchableOpacity, Text, StyleSheet} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const PositionLayout = () => { const [position, setPosition] = useState("relative"); @@ -2270,7 +2265,7 @@ const PositionLayout = () => { { diff --git a/cndocs/handling-touches.md b/cndocs/handling-touches.md index c4c13e0eaf6..ce796df3a96 100644 --- a/cndocs/handling-touches.md +++ b/cndocs/handling-touches.md @@ -25,7 +25,6 @@ title: 处理触摸事件 再试试下面这个使用`Button`的例子吧。你可以点击"Tap to Play"来预览真实效果。 ```SnackPlayer name=Button%20Basics -import React from 'react'; import {Alert, Button, StyleSheet, View} from 'react-native'; const ButtonBasics = () => { @@ -87,7 +86,6 @@ export default ButtonBasics; 我们来看一下示例： ```SnackPlayer name=Touchables -import React from 'react'; import { Alert, Platform, diff --git a/cndocs/height-and-width.md b/cndocs/height-and-width.md index b04b2a271c0..ced884b4394 100644 --- a/cndocs/height-and-width.md +++ b/cndocs/height-and-width.md @@ -10,7 +10,6 @@ title: 高度与宽度 最简单的给组件设定尺寸的方式就是在样式中指定固定的`width`和`height`。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。 ```SnackPlayer name=Height%20and%20Width -import React from 'react'; import {View} from 'react-native'; const FixedDimensionsBasics = () => { @@ -59,7 +58,6 @@ export default FixedDimensionsBasics; ::: ```SnackPlayer name=Flex%20Dimensions -import React from 'react'; import {View} from 'react-native'; const FlexDimensionsBasics = () => { @@ -85,7 +83,6 @@ export default FlexDimensionsBasics; 如果你想要按比例填充屏幕上某一部分，又不想使用`flex`布局，那么可以在组件的`style`中使用**百分比**。与弹性宽高相似，百分比宽高要求父容器有一个明确的尺寸。 ```SnackPlayer name=Percentage%20Dimensions -import React from 'react'; import {View} from 'react-native'; const PercentageDimensionsBasics = () => { diff --git a/cndocs/i18nmanager.md b/cndocs/i18nmanager.md index b26108d040c..5bcdf6d7bdb 100644 --- a/cndocs/i18nmanager.md +++ b/cndocs/i18nmanager.md @@ -14,7 +14,6 @@ title: I18nManager 如果你使用绝对定位来对齐元素，在 RTL 语言下可能无法正确对齐。使用 `isRTL` 可以动态调整对齐方向或动画方向。 ```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations -import React from 'react'; import {I18nManager, Text, View} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -43,7 +42,7 @@ export default App; ### 开发调试 ```SnackPlayer name=I18nManager%20During%20Development -import React, {useState} from 'react'; +import {useState} from 'react'; import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; diff --git a/cndocs/image-style-props.md b/cndocs/image-style-props.md index f6f45295a75..66b6f724a14 100644 --- a/cndocs/image-style-props.md +++ b/cndocs/image-style-props.md @@ -8,7 +8,6 @@ title: Image Style Props ### 图片缩放模式 ```SnackPlayer name=Image%20Resize%20Modes%20Example -import React from 'react'; import {View, Image, Text, StyleSheet, ScrollView} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle; ### 图片边框 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example -import React from 'react'; import {Image, StyleSheet, Text} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle; ### 图片圆角 ```SnackPlayer name=Style%20Border%20Radius%20Example -import React from 'react'; import {View, Image, StyleSheet, Text, ScrollView} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle; ### 图片着色 ```SnackPlayer name=Style%20tintColor%20Function%20Component -import React from 'react'; import {Image, StyleSheet, Text} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; diff --git a/cndocs/image.md b/cndocs/image.md index 3e1022a9604..67e14960a55 100644 --- a/cndocs/image.md +++ b/cndocs/image.md @@ -14,7 +14,6 @@ title: Image ## 示例 ```SnackPlayer name=Image%20Example -import React from 'react'; import {Image, StyleSheet} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -61,7 +60,6 @@ export default DisplayAnImage; 你也可以为图片添加 `style`： ```SnackPlayer name=Styled%20Image%20Example -import React from 'react'; import {Image, StyleSheet} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -276,8 +274,8 @@ dependencies { 加载结束（无论成功还是失败）时调用。 -| 类型 | -| ------ | +| 类型 | +| ---------- | | () => void | --- @@ -288,8 +286,8 @@ dependencies { **示例：** `onLoadStart={() => this.setState({loading: true})}` -| 类型 | -| ------ | +| 类型 | +| ---------- | | () => void | --- @@ -298,8 +296,8 @@ dependencies { 当图片部分加载完成时调用。什么是“部分加载”由具体的加载器定义，此属性主要用于渐进式 JPEG。 -| 类型 | -| ------ | +| 类型 | +| ---------- | | () => void | --- @@ -388,9 +386,9 @@ dependencies { 如果源图尺寸为 200x200，目标为 24x24，将 `resizeMultiplier` 设为 `2.0` 会让 Fresco 下采样到 48x48。Fresco 会选择最接近的 2 的幂（因此是 50x50）并解码到该尺寸。若不使用 multiplier，最近的 2 的幂为 25x25，得到的图片将由系统缩小。 -| 类型 | 默认值 | -| ------ | ------- | -| number | `1.0` | +| 类型 | 默认值 | +| ------ | ------ | +| number | `1.0` | --- @@ -486,8 +484,8 @@ static abortPrefetch(requestId: number); **参数：** -| 名称 | 类型 | 说明 | -| ---------------------------------------------------------- | ------ | ------------------------------------------ | +| 名称 | 类型 | 说明 | +| -------------------------------------------------------------- | ------ | ---------------------------- | | requestId
Required
| number | `prefetch()` 返回的请求 id。 | --- @@ -542,9 +540,9 @@ await Image.prefetch(url); **参数：** -| 名称 | 类型 | 说明 | -| -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------- | -| url
Required
| string | 图片的远程地址。 | +| 名称 | 类型 | 说明 | +| -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------- | +| url
Required
| string | 图片的远程地址。 | | callback | function
Android
| 将会被调用并携带 `requestId` 的函数。 | --- @@ -561,8 +559,8 @@ static queryCache( **参数：** -| 名称 | 类型 | 说明 | -| --------------------------------------------------------- | ----- | --------------------- | +| 名称 | 类型 | 说明 | +| --------------------------------------------------------- | ----- | ---------------------- | | urls
Required
| array | 要查询缓存的图片 URL。 | --- @@ -582,8 +580,8 @@ static resolveAssetSource(source: ImageSourcePropType): { **参数：** -|
名称
| 类型 | 说明 | -| ----------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------- | +|
名称
| 类型 | 说明 | +| ----------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------- | | source
Required
| [ImageSource](image#imagesource), number | 由 `require('./foo.png')` 返回的不透明数字，或一个 ImageSource。 | ## 类型定义 @@ -611,19 +609,19 @@ static resolveAssetSource(source: ImageSourcePropType): { **属性：** -| 名称 | 类型 | 说明 | -| ------ | ------ | --------------------------------- | +| 名称 | 类型 | 说明 | +| ------ | ------ | ------------------------------- | | source | object | [source 对象](#source-object)。 | #### Source Object **属性：** -| 名称 | 类型 | 说明 | -| ------ | ------ | --------------------------------- | -| width | number | 已加载图片的宽度。 | -| height | number | 已加载图片的高度。 | -| uri | string | 图片资源标识符。 | +| 名称 | 类型 | 说明 | +| ------ | ------ | ------------------ | +| width | number | 已加载图片的宽度。 | +| height | number | 已加载图片的高度。 | +| uri | string | 图片资源标识符。 | ### ImageSource @@ -633,17 +631,17 @@ static resolveAssetSource(source: ImageSourcePropType): { **当以对象或对象数组形式传入时的属性：** -|
名称
| 类型 | 说明 | -| ------------------------------------------ | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| uri | string | 图片资源标识符，可以是 http 地址、本地文件路径或静态图片资源的名称。 | -| width | number | 若在构建时已知，可以指定该值并作为 `` 组件的默认宽度。 | -| height | number | 若在构建时已知，可以指定该值并作为 `` 组件的默认高度。 | -| scale | number | 指示图片的缩放因子。默认为 `1.0`，表示一个图片像素等于一个显示点/DIP。 | -| bundle
iOS
| string | 图片所在的 iOS 资源 bundle，若不设置则默认为 `[NSBundle mainBundle]`。 | -| method | string | 使用的 HTTP 方法，未指定时默认为 `'GET'`。 | -| headers | object | 随远程图片请求发送的 HTTP 头对象。 | -| body | string | 随请求发送的 HTTP body。必须是有效的 UTF-8 字符串，会原样发送，不会做额外编码（如 URL 转义或 base64）。 | -| cache
iOS
| [ImageCacheEnum](image#imagecacheenum-ios) | 决定请求如何处理可能的缓存响应。 | +|
名称
| 类型 | 说明 | +| ------------------------------------------ | ------------------------------------------ | ------------------------------------------------------------------------------------------------------- | +| uri | string | 图片资源标识符，可以是 http 地址、本地文件路径或静态图片资源的名称。 | +| width | number | 若在构建时已知，可以指定该值并作为 `` 组件的默认宽度。 | +| height | number | 若在构建时已知，可以指定该值并作为 `` 组件的默认高度。 | +| scale | number | 指示图片的缩放因子。默认为 `1.0`，表示一个图片像素等于一个显示点/DIP。 | +| bundle
iOS
| string | 图片所在的 iOS 资源 bundle，若不设置则默认为 `[NSBundle mainBundle]`。 | +| method | string | 使用的 HTTP 方法，未指定时默认为 `'GET'`。 | +| headers | object | 随远程图片请求发送的 HTTP 头对象。 | +| body | string | 随请求发送的 HTTP body。必须是有效的 UTF-8 字符串，会原样发送，不会做额外编码（如 URL 转义或 base64）。 | +| cache
iOS
| [ImageCacheEnum](image#imagecacheenum-ios) | 决定请求如何处理可能的缓存响应。 | **当以 number 传入时：** diff --git a/cndocs/imagebackground.md b/cndocs/imagebackground.md index 1c6c659155f..ce3ebc4b5ca 100644 --- a/cndocs/imagebackground.md +++ b/cndocs/imagebackground.md @@ -12,11 +12,10 @@ title: 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'; -const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}; +const image = {uri: 'https://legacy.react.dev/logo-og.png'}; const App = () => ( @@ -79,4 +78,4 @@ export default App; | 类型 | | --------------------------------- | -| [View Style](view-style-props.md) | \ No newline at end of file +| [View Style](view-style-props.md) | diff --git a/cndocs/images.md b/cndocs/images.md index df42ce51416..63128ced176 100644 --- a/cndocs/images.md +++ b/cndocs/images.md @@ -101,11 +101,11 @@ const icon = this.props.active ```tsx // 正确 - // 错误 - + ``` ### 网络图片的请求参数 @@ -115,7 +115,7 @@ const icon = this.props.active ```tsx + ``` 深层次的考虑是，这样可以使我们在对象中添加一些元数据(metadata)。假设你在使用`require('./my-icon.png')`，那么我们就会在其中添加真实文件路径以及尺寸等信息（这只是举个例子，未来的版本中 require 的具体行为可能会变化）。此外这也是考虑了未来的扩展性，比如我们可能会加入精灵图（sprites）的支持：在输出`{uri: ...}`的基础上，我们可以进一步输出裁切信息`{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}`，这样理论上就可以在现有的代码中无缝支持精灵图的切分。 @@ -263,15 +263,16 @@ return ( ## 配置 iOS 图像缓存限制 在 iOS 上，我们公开了一个 API 来覆盖 React Native 的默认图像缓存限制。这应该从你的原生 AppDelegate 代码中调用（例如在 `didFinishLaunchingWithOptions` 中）。 + ```objectivec RCTSetImageCacheLimits(4*1024*1024, 200*1024*1024); ``` **Parameters:** -| Name | Type | Required | Description | -| -------------- | ------ | -------- | ----------------------- | -| imageSizeLimit | number | Yes | 图像缓存大小限制 | +| Name | Type | Required | Description | +| -------------- | ------ | -------- | ----------------- | +| imageSizeLimit | number | Yes | 图像缓存大小限制 | | totalCostLimit | number | Yes | 图像缓存大小限制. | 在上面的代码示例中，图像大小限制设置为 4 MB，总成本限制设置为 200 MB。 diff --git a/cndocs/improvingux.md b/cndocs/improvingux.md index 026d2b5155e..cca1cf93af6 100644 --- a/cndocs/improvingux.md +++ b/cndocs/improvingux.md @@ -21,7 +21,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ```SnackPlayer name=TextInput%20form%20example&ext=js -import React, {useState, useRef} from 'react'; +import {useState, useRef} from 'react'; import { Alert, Text, @@ -115,7 +115,7 @@ export default App; ```SnackPlayer name=TextInput%20form%20example&ext=tsx -import React, {useState, useRef} from 'react'; +import {useState, useRef} from 'react'; import { Alert, Text, @@ -216,7 +216,7 @@ export default App; ```SnackPlayer name=KeyboardAvoidingView%20example&ext=js -import React, {useState, useRef} from 'react'; +import {useState, useRef} from 'react'; import { Alert, Text, @@ -313,7 +313,7 @@ export default App; ```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx -import React, {useState, useRef} from 'react'; +import {useState, useRef} from 'react'; import { Alert, Text, @@ -414,7 +414,6 @@ export default App; 在手机上精确点击按钮是很困难的。确保所有交互式元素的尺寸至少为 44x44。一种做法是给元素留出足够的空间，使用 `padding`、`minWidth` 和 `minHeight` 样式值。或者，你可以使用 [`hitSlop` 属性](touchablewithoutfeedback.md#hitslop) 来增加可交互区域，而不影响布局。以下是一个演示： ```SnackPlayer name=HitSlop%20example -import React from 'react'; import { Text, StatusBar, @@ -493,7 +492,6 @@ export default App; Android API 21+ 使用 Material Design 水波纹效果，在用户触摸屏幕上的可交互区域时提供反馈。React Native 通过 [`TouchableNativeFeedback` 组件](touchablenativefeedback.md) 暴露了这一功能。使用这种触摸效果代替透明度或高亮，通常会让你的应用在平台上更加自然。不过需要注意的是，它在 iOS 或 Android API < 21 上不起作用，因此你需要在 iOS 上回退使用其他 Touchable 组件。你可以使用像 [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) 这样的库来处理平台差异。 ```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android -import React from 'react'; import { TouchableNativeFeedback, TouchableOpacity, diff --git a/cndocs/inputaccessoryview.md b/cndocs/inputaccessoryview.md index 2ea372cee62..baa476d4d4f 100644 --- a/cndocs/inputaccessoryview.md +++ b/cndocs/inputaccessoryview.md @@ -8,7 +8,7 @@ title: InputAccessoryView 要使用此组件，请将您的自定义工具栏包装在InputAccessoryView组件中，并设置一个`nativeID`。然后，将该`nativeID`作为您想要的任何`TextInput `的`inputAccessoryViewID'。一个基本的例子： ```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios -import React, {useState} from 'react'; +import {useState} from 'react'; import { Button, InputAccessoryView, @@ -88,7 +88,7 @@ export default App; ### `style` -|| 类型 | +|| 类型 | || --------------------------------- | || [View Style](view-style-props.md) | diff --git a/cndocs/interactionmanager.md b/cndocs/interactionmanager.md index 3aeebc0f92f..04c19bc067c 100644 --- a/cndocs/interactionmanager.md +++ b/cndocs/interactionmanager.md @@ -51,7 +51,7 @@ InteractionManager.clearInteractionHandle(handle); ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import React, {useEffect} from 'react'; +import {useEffect} from 'react'; import { Alert, Animated, @@ -133,7 +133,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import React, {useEffect} from 'react'; +import {useEffect} from 'react'; import { Alert, Animated, @@ -224,7 +224,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js -import React, {useEffect} from 'react'; +import {useEffect} from 'react'; import { Alert, Animated, @@ -300,7 +300,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx -import React, {useEffect} from 'react'; +import {useEffect} from 'react'; import { Alert, Animated, diff --git a/cndocs/intro-react-native-components.md b/cndocs/intro-react-native-components.md index 30fe0caed0b..9429fe0427b 100644 --- a/cndocs/intro-react-native-components.md +++ b/cndocs/intro-react-native-components.md @@ -44,7 +44,6 @@ React Native 具有许多核心组件，从表单控件到活动指示器，应 在接下来的章节，您将开始组合这些核心组件，来了解 React 的工作方式。先做一些热身吧！ ```SnackPlayer name=Hello%20World -import React from 'react'; import { View, Text, Image, ScrollView, TextInput } from 'react-native'; const App = () => { diff --git a/cndocs/intro-react.md b/cndocs/intro-react.md index 11809ebb1ab..395ea60d12c 100644 --- a/cndocs/intro-react.md +++ b/cndocs/intro-react.md @@ -6,7 +6,7 @@ description: 要深入理解 React Native，需要扎实的React 基础知识。 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -React Native 的基础是[React](https://zh-hans.reactjs.org/)， 是在 web 端非常流行的开源 UI 框架。要想掌握 React Native，先了解 React 框架本身是非常有帮助的。本文旨在为初学者介绍一些 react 的入门知识。 +React Native 的基础是[React](https://zh-hans.react.dev/)， 是在 web 端非常流行的开源 UI 框架。要想掌握 React Native，先了解 React 框架本身是非常有帮助的。本文旨在为初学者介绍一些 react 的入门知识。 本文主要会探讨以下几个 React 的核心概念： @@ -15,7 +15,7 @@ React Native 的基础是[React](https://zh-hans.reactjs.org/)， 是在 web 端 - props 属性 - state 状态 -如果你想更深一步学习，我们建议你阅读[React 的官方文档](https://zh-hans.reactjs.org/)，它也提供有中文版。 +如果你想更深一步学习，我们建议你阅读[React 的官方文档](https://zh-hans.react.dev/)，它也提供有中文版。 ## 尝试编写一个组件 @@ -25,7 +25,6 @@ React Native 的基础是[React](https://zh-hans.reactjs.org/)， 是在 web 端 ```SnackPlayer name=Your%20Cat -import React from 'react'; import { Text } from 'react-native'; const Cat = () => { @@ -39,20 +38,19 @@ export default Cat; 要定义一个`Cat`组件，第一步要使用[`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)语句来引入`React`以及`React Native`的[`Text`](text)组件： -```jsx -import React from 'react'; -import { Text } from 'react-native'; +```tsx +import {Text} from 'react-native'; ``` 然后一个简单的函数就可以作为一个组件： -```jsx +```tsx const Cat = () => {}; ``` 这个函数的`返回值`就会被渲染为一个 React 元素。这里`Cat`会渲染一个``元素： -```jsx +```tsx const Cat = () => { return Hello, I am your cat!; }; @@ -60,7 +58,7 @@ const Cat = () => { 这里我们还使用了[`export default`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)语句来导出这个组件，以使其可以在其他地方引入使用： -```jsx +```tsx const Cat = () => { return Hello, I am your cat!; }; @@ -74,7 +72,7 @@ export default Cat; Class 组件比函数组件写起来要繁琐一些。 ```SnackPlayer name=Your%20Cat -import React, { Component } from 'react'; +import { Component } from 'react'; import { Text } from 'react-native'; class Cat extends Component { @@ -90,19 +88,19 @@ export default Cat; 你还需要从 React 中引入`Component`： -```jsx -import React, { Component } from 'react'; +```tsx +import {Component} from 'react'; ``` 定义组件首先要继承(extends)自`Component`： -```jsx +```tsx class Cat extends Component {} ``` Class 组件必须有一个`render()`函数，它的返回值会被渲染为一个 React 元素： -```jsx +```tsx class Cat extends Component { render() { return Hello, I am your cat!; @@ -112,7 +110,7 @@ class Cat extends Component { 和函数组件一样，我们也可以导出 class 组件： -```jsx +```tsx class Cat extends Component { render() { return Hello, I am your cat!; @@ -131,10 +129,9 @@ export default Cat; ## JSX -React 和 React Native 都使用**JSX 语法**，这种语法使得你可以在 JavaScript 中直接输出元素：`Hello, I am your cat!`。React 的文档有一份完整的[JSX 指南](https://zh-hans.reactjs.org/docs/jsx-in-depth.html#gatsby-focus-wrapper)可供你参考。因为 JSX 本质上也就是 JavaScript，所以你可以在其中直接使用变量。这里我们为猫猫的名字声明了一个变量`name`，并且用括号把它放在了``之中。 +React 和 React Native 都使用**JSX 语法**，这种语法使得你可以在 JavaScript 中直接输出元素：`Hello, I am your cat!`。React 的文档有一份完整的[JSX 指南](https://zh-hans.react.dev/docs/jsx-in-depth.html#gatsby-focus-wrapper)可供你参考。因为 JSX 本质上也就是 JavaScript，所以你可以在其中直接使用变量。这里我们为猫猫的名字声明了一个变量`name`，并且用括号把它放在了``之中。 ```SnackPlayer name=Curly%20Braces -import React from 'react'; import { Text } from 'react-native'; const Cat = () => { @@ -152,7 +149,6 @@ export default Cat; 括号中可以使用任意 JavaScript 表达式，包括调用函数，例如`{getFullName("Rum", Tum", "Tugger")}`： ```SnackPlayer name=Curly%20Braces -import React from 'react'; import { Text } from 'react-native'; const getFullName = (firstName, secondName, thirdName) => { @@ -172,7 +168,7 @@ export default Cat; 你可以把括号`{}`想象成在 JSX 中打开了一个可以调用 JS 功能的传送门！ -> 在 React Native 0.71 版本之前，JSX 语法糖的实质是调用`React.createElement`方法，所以你必须在文件头部引用`import React from 'react'`。但在 React Native 0.71 版本之后，官方引入了[新的 JSX 转换](https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)，可以**不用**再在文件头部写`import React from 'react'`。 +> 在 React Native 0.71 版本之前，JSX 语法糖的实质是调用`React.createElement`方法，所以你必须在文件头部引用`import React from 'react'`。但在 React Native 0.71 版本之后，官方引入了[新的 JSX 转换](https://zh-hans.react.dev/blog/2020/09/22/introducing-the-new-jsx-transform.html)，可以**不用**再在文件头部写`import React from 'react'`。 ## 自定义组件 @@ -181,7 +177,6 @@ export default Cat; 例如你可以把[`Text`](text)和[`TextInput`](textinput)嵌入到[`View`](view) 中，React Native 会把它们一起渲染出来： ```SnackPlayer name=Custom%20Components -import React from 'react'; import { Text, TextInput, View } from 'react-native'; const Cat = () => { @@ -222,7 +217,6 @@ export default Cat; 这样你就可以在别处通过``来任意引用这个组件了： ```SnackPlayer name=Multiple%20Components -import React from 'react'; import { Text, TextInput, View } from 'react-native'; const Cat = () => { @@ -256,7 +250,6 @@ export default Cafe; **Props** 是“properties”（属性）的简写。Props 使得我们可以定制组件。比如可以给每只``一个不同的`name`： ```SnackPlayer name=Multiple%20Props -import React from 'react'; import { Text, View } from 'react-native'; const Cat = (props) => { @@ -283,7 +276,6 @@ export default Cafe; React Native 的绝大多数核心组件都提供了可定制的 props。例如，在使用[`Image`](image)组件时，你可以给它传递一个[`source`](image#source)属性，用来指定它显示的内容： ```SnackPlayer name=Props -import React from 'react'; import { Text, View, Image } from 'react-native'; const CatApp = () => { @@ -303,7 +295,7 @@ export default CatApp; `Image` 有[很多不同的 props](image#props)，[`style`](image#style)也是其中之一，它接受对象形式的样式和布局键值对。 -> 请留意我们在指定`style`属性的宽高时所用到的双层括号`{{ }}`。在 JSX 中，引用 JS 值时需要使用`{}`括起来。在你需要传递非字符串值（比如数组或者数字）的时候会经常用到这种写法：` age={2}`。然而我们在 JS 中定义一个对象时，本来**_也_**需要用括号括起来：`{width: 200, height: 200}`。因此要在 JSX 中传递一个 JS 对象值的时候，就必须用到两层括号：`{{width: 200, height: 200}}`。 +> 请留意我们在指定`style`属性的宽高时所用到的双层括号`{{ }}`。在 JSX 中，引用 JS 值时需要使用`{}`括起来。在你需要传递非字符串值（比如数组或者数字）的时候会经常用到这种写法：` age={2}`。然而我们在 JS 中定义一个对象时，本来***也***需要用括号括起来：`{width: 200, height: 200}`。因此要在 JSX 中传递一个 JS 对象值的时候，就必须用到两层括号：`{{width: 200, height: 200}}`。 使用核心组件[`Text`](text), [`Image`](image)以及[`View`](view)搭配 props 已经可以做不少东西了！但是如果想要做一些用户交互，那我们还需要用到状态（state）。 @@ -316,10 +308,10 @@ export default CatApp; -你可以使用[React 的`useState` Hook](https://zh-hans.reactjs.org/docs/hooks-state.html)来为组件添加状态。Hook （钩子）是一种特殊的函数，可以让你“钩住”一些 React 的特性。例如`useState`可以在函数组件中添加一个“状态钩子”，在函数组件重新渲染执行的时候能够保持住之前的状态。要了解更多，可以阅读[React 中有关 Hook 的文档](https://zh-hans.reactjs.org/docs/hooks-intro.html)。 +你可以使用[React 的`useState` Hook](https://zh-hans.react.dev/docs/hooks-state.html)来为组件添加状态。Hook （钩子）是一种特殊的函数，可以让你“钩住”一些 React 的特性。例如`useState`可以在函数组件中添加一个“状态钩子”，在函数组件重新渲染执行的时候能够保持住之前的状态。要了解更多，可以阅读[React 中有关 Hook 的文档](https://zh-hans.react.dev/docs/hooks-intro.html)。 ```SnackPlayer name=State -import React, { useState } from "react"; +import { useState } from 'react'; import { Button, Text, View } from "react-native"; const Cat = (props) => { @@ -355,14 +347,14 @@ export default Cafe; 首先要从 react 中引入`useState`： -```jsx -import React, { useState } from 'react'; +```tsx +import {useState} from 'react'; ``` 然后可以通过在函数内调用`useState`来为组件声明状态。在本示例中 `useState` 创建了一个 `isHungry` 状态变量： -```jsx -const Cat = (props) => { +```tsx +const Cat = props => { const [isHungry, setIsHungry] = useState(true); // ... }; @@ -377,7 +369,7 @@ const Cat = (props) => { 下面我们添加一个按钮[`Button`](button)组件，并给它一个`onPress`的 prop： -```jsx +```tsx