diff --git a/cndocs/accessibilityinfo.md b/cndocs/accessibilityinfo.md index 5798bdc3254..6ab0ac28c7c 100644 --- a/cndocs/accessibilityinfo.md +++ b/cndocs/accessibilityinfo.md @@ -85,7 +85,7 @@ static addEventListener( handler: ( event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent, ) => void, -): EmitterSubscription; +): EventSubscription; ``` 添加事件处理函数。支持的事件如下： diff --git a/cndocs/animations.md b/cndocs/animations.md index 1acedbd9779..8aa8cc77959 100644 --- a/cndocs/animations.md +++ b/cndocs/animations.md @@ -74,12 +74,12 @@ export default () => { ```SnackPlayer ext=tsx -import {useEffect, useRef, type PropsWithChildren} from 'react'; +import {useEffect, useRef, type PropsWithChildren, type FC} from 'react'; import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; -const FadeInView: React.FC = props => { +const FadeInView: FC = props => { const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { @@ -314,7 +314,7 @@ import { Text, StyleSheet, View, - ImageBackground, + Image, Animated, useWindowDimensions, useAnimatedValue, @@ -356,13 +356,17 @@ const App = () => { - + + {'Image - ' + imageIndex} - + ); })} diff --git a/cndocs/appearance.md b/cndocs/appearance.md index 88d08878665..311455e713b 100644 --- a/cndocs/appearance.md +++ b/cndocs/appearance.md @@ -122,7 +122,7 @@ static setColorScheme('light' | 'dark' | 'auto' | 'unspecified'): void; ```tsx static addChangeListener( listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void, -): NativeEventSubscription; +): EventSubscription; ``` 添加一个事件监听器，在外观偏好发生变化时触发。在 iOS 和 Android 上，回调中的 `colorScheme` 值始终为 `'light'` 或 `'dark'`。 diff --git a/cndocs/appstate.md b/cndocs/appstate.md index 9d40a6912f9..3f6bbdf8ddd 100644 --- a/cndocs/appstate.md +++ b/cndocs/appstate.md @@ -106,7 +106,7 @@ export default AppStateExample; static addEventListener( type: AppStateEvent, listener: (state: AppStateStatus) => void, -): NativeEventSubscription; +): EventSubscription; ``` 设置一个在 AppState 上发生指定事件类型时调用的函数。`eventType` 的有效值参见[上方列出的事件](#events)。返回 `EventSubscription`。 diff --git a/cndocs/backhandler.md b/cndocs/backhandler.md index 5bd6cf21b98..f6ae45586f2 100644 --- a/cndocs/backhandler.md +++ b/cndocs/backhandler.md @@ -102,7 +102,7 @@ const styles = StyleSheet.create({ export default App; ``` -`BackHandler.addEventListener` 创建一个事件监听器并返回一个 `NativeEventSubscription` 对象，应使用 `NativeEventSubscription.remove` 方法清除该对象。 +`BackHandler.addEventListener` 创建一个事件监听器并返回一个 `EventSubscription` 对象，应使用 `EventSubscription.remove` 方法清除该对象。 ## 与 React 导航一起使用 @@ -124,7 +124,7 @@ export default App; static addEventListener( eventName: BackPressEventName, handler: () => boolean | null | undefined, -): NativeEventSubscription; +): EventSubscription; ``` --- diff --git a/cndocs/dimensions.md b/cndocs/dimensions.md index 6cf15ee4878..3a72039d415 100644 --- a/cndocs/dimensions.md +++ b/cndocs/dimensions.md @@ -104,20 +104,20 @@ static addEventListener( handler: ({ window, screen, - }: DimensionsValue) => void, -): EmitterSubscription; + }: DimensionsPayload) => void, +): EventSubscription; ``` 添加一个事件监听函数。目前支持的事件有： -- `change`：在`Dimensions`对象内部的属性发生变化时触发。事件处理程序的参数是一个[`DimensionsValue`](#dimensionsvalue)类型的对象。 +- `change`：在`Dimensions`对象内部的属性发生变化时触发。事件处理程序的参数是一个[`DimensionsPayload`](#dimensionspayload)对象。 --- ### `get()` ```tsx -static get(dim: 'window' | 'screen'): ScaledSize; +static get(dim: string): DisplayMetrics | DisplayMetricsAndroid; ``` 初始尺寸在调用 `runApplication` 之前设置，因此在运行任何其他 require 之前应该可用，但可能会在之后更新。 @@ -130,22 +130,26 @@ static get(dim: 'window' | 'screen'): ScaledSize; | -------------------------------------------------------------- | ------ | ----------------------------------------------- | | dim
必需
| 字符串 | 调用 `set` 时定义的尺寸的名称。返回该尺寸的值。 | -> 对于 Android，`window` 尺寸将不包括 `状态栏`（如果不透明）和 `底部导航栏` 占用的大小。 +:::note +对于 Android，`window` 尺寸将不包括`状态栏`（如果不透明）和`底部导航栏`占用的大小。 +::: --- ## 类型定义 -### DimensionsValue +### DimensionsPayload **属性:** -| 名称 | 类型 | 描述 | -| ------ | ----------------------------------- | -------------------- | -| window | [ScaledSize](dimensions#scaledsize) | 可见应用窗口的大小。 | -| screen | [ScaledSize](dimensions#scaledsize) | 设备屏幕的大小。 | +| 名称 | 类型 | 描述 | +| -------------------- | --------------------------------------------------------- | ------------------------ | +| window | [DisplayMetrics](dimensions#displaymetrics) | 可见应用窗口的大小。 | +| screen | [DisplayMetrics](dimensions#displaymetrics) | 设备屏幕的大小。 | +| windowPhysicalPixels | [DisplayMetricsAndroid](dimensions#displaymetricsandroid) | Android 窗口的物理像素。 | +| screenPhysicalPixels | [DisplayMetricsAndroid](dimensions#displaymetricsandroid) | Android 屏幕的物理像素。 | -### ScaledSize +### DisplayMetrics | 类型 | | ---- | @@ -159,3 +163,11 @@ static get(dim: 'window' | 'screen'): ScaledSize; | height | number | | scale | number | | fontScale | number | + +### DisplayMetricsAndroid + +`DisplayMetricsAndroid` 包含 [`DisplayMetrics`](dimensions#displaymetrics) 的全部属性，以及以下属性： + +| 名称 | 类型 | +| ---------- | ------ | +| densityDpi | number | diff --git a/cndocs/images.md b/cndocs/images.md index d52070dcd27..9b1552aab2d 100644 --- a/cndocs/images.md +++ b/cndocs/images.md @@ -248,19 +248,18 @@ iOS 会为同一张图片在相册中保存多个不同尺寸的副本。为了 ## 背景图片与嵌套写法 -开发者们常面对的一种需求就是类似 web 中的背景图（`background-image`）。要实现这一用例，只需使用``组件（其 props 与``完全相同），然后把需要背景图的子组件嵌入其中即可。 - -也可能你并不需要使用``，因为它的实现其实非常简单。你可以阅读其[文档](imagebackground.md)然后思考你是否有更好更简单的布局方案。 +要在图片上层叠内容，可以在一个 [`View`](view.md) 内渲染一个绝对定位的 [`Image`](image.md)，然后在其后放置应显示在上层的内容。 ```tsx return ( - + + Inside - + ); ``` -注意你必须指定宽高样式。 +注意必须在外层 `View` 上指定宽高样式。 ## iOS 边框圆角的注意事项 diff --git a/cndocs/inputaccessoryview.md b/cndocs/inputaccessoryview.md index baa476d4d4f..cb08ef0f329 100644 --- a/cndocs/inputaccessoryview.md +++ b/cndocs/inputaccessoryview.md @@ -1,8 +1,12 @@ --- id: inputaccessoryview -title: InputAccessoryView +title: '🗑️ InputAccessoryView' --- +:::warning[已弃用] +`InputAccessoryView` 已弃用，将在未来的版本中移除。 +::: + 一个可以在iOS上自定义键盘输入辅助视图的组件。当`TextInput`获得焦点时，输入辅助视图显示在键盘上方。该组件可用于创建自定义工具栏。 要使用此组件，请将您的自定义工具栏包装在InputAccessoryView组件中，并设置一个`nativeID`。然后，将该`nativeID`作为您想要的任何`TextInput `的`inputAccessoryViewID'。一个基本的例子： diff --git a/cndocs/keyboard.md b/cndocs/keyboard.md index 5a87dae9135..c36374e0199 100644 --- a/cndocs/keyboard.md +++ b/cndocs/keyboard.md @@ -76,7 +76,7 @@ export default Example; static addListener: ( eventType: KeyboardEventName, listener: KeyboardEventListener, -) => EmitterSubscription; +) => EventSubscription; ``` `addListener`用于注册一个 JavaScript 函数来监听处理原生键盘通知事件。 diff --git a/cndocs/linking.md b/cndocs/linking.md index 5b0200f338f..6640fd31daf 100644 --- a/cndocs/linking.md +++ b/cndocs/linking.md @@ -561,7 +561,7 @@ export default App; static addEventListener( type: 'url', handler: (event: {url: string}) => void, -): EmitterSubscription; +): EventSubscription; ``` 通过监听 `url` 事件类型并提供处理程序，为链接更改添加处理程序。 diff --git a/cndocs/systrace.md b/cndocs/systrace.md index 15def9e2e85..5c6c8515f17 100644 --- a/cndocs/systrace.md +++ b/cndocs/systrace.md @@ -7,20 +7,16 @@ title: Systrace ## 示例 -`Systrace` 允许您使用标签和整数值标记 JavaScript (JS) 事件。在 EasyProfiler 中捕获非计时的 JS 事件。 +`Systrace` 允许您使用标签和整数值标记 JavaScript (JS) 事件。先用 Perfetto 或 EasyProfiler 等 Android 性能分析工具开始抓取，然后用这些标记在捕获的 trace 中识别相应事件。 ```SnackPlayer name=Systrace%20Example import {Button, Text, View, StyleSheet, Systrace} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const enableProfiling = () => { - Systrace.setEnabled(true); // 调用 setEnabled 来开启性能分析 + const markEvent = () => { Systrace.beginEvent('event_label'); Systrace.counterEvent('event_label', 10); - }; - - const stopProfiling = () => { Systrace.endEvent(); }; @@ -31,15 +27,7 @@ const App = () => { React Native Systrace API -