diff --git a/cndocs/animated.md b/cndocs/animated.md index 9f1b4312293..8c1955be494 100644 --- a/cndocs/animated.md +++ b/cndocs/animated.md @@ -219,7 +219,7 @@ static decay(value, config): CompositeAnimation; - `velocity`：初始速度。必填。 - `deceleration`：衰减率。默认 `0.997`。 -- `isInteraction`：是否在 `InteractionManager` 上创建 interaction handle。默认 `true`。 +- `isInteraction`：是否创建 interaction handle。默认 `true`。 - `useNativeDriver`：为 `true` 时使用原生驱动。必填。 --- @@ -237,7 +237,7 @@ static timing(value, config): CompositeAnimation; - `duration`：动画时长（毫秒）。默认 `500`。 - `easing`：定义曲线的缓动函数。默认为 `Easing.inOut(Easing.ease)`。 - `delay`：延迟多久后开始（毫秒）。默认 `0`。 -- `isInteraction`：是否在 `InteractionManager` 上创建 interaction handle。默认 `true`。 +- `isInteraction`：是否创建 interaction handle。默认 `true`。 - `useNativeDriver`：为 `true` 时使用原生驱动。必填。 --- @@ -274,7 +274,7 @@ static spring(value, config): CompositeAnimation; - `restDisplacementThreshold`：位移阈值；低于该值可视为静止。默认 `0.001`。 - `restSpeedThreshold`：速度阈值（像素/秒）；低于该值可视为静止。默认 `0.001`。 - `delay`：延迟多久后开始（毫秒）。默认 `0`。 -- `isInteraction`：是否在 `InteractionManager` 上创建 interaction handle。默认 `true`。 +- `isInteraction`：是否创建 interaction handle。默认 `true`。 - `useNativeDriver`：为 `true` 时使用原生驱动。必填。 --- diff --git a/cndocs/animations.md b/cndocs/animations.md index f6aea5143bb..08e6bbaac8f 100644 --- a/cndocs/animations.md +++ b/cndocs/animations.md @@ -669,4 +669,4 @@ const styles = StyleSheet.create({ 我们可以在 Rebound 示例中使用它来更新比例 - 如果我们要更新的组件是深度嵌套的并且尚未使用“shouldComponentUpdate”进行优化，这可能会有所帮助。 -如果您发现动画掉帧（每秒执行低于 60 帧），请考虑使用“setNativeProps”或“shouldComponentUpdate”来优化它们。或者，您可以在 UI 线程而不是 JavaScript 线程上运行动画 [使用 useNativeDriver 选项](/blog/2017/02/14/using-native-driver-for-animated)。您可能还想使用 [InteractionManager](interactionmanager) 将任何计算密集型工作推迟到动画完成之后。您可以使用应用程序内开发菜单中的“FPS Monitor”工具来监视帧速率。 +如果您发现动画掉帧（每秒执行低于 60 帧），请考虑使用“setNativeProps”或“shouldComponentUpdate”来优化它们。或者，您可以在 UI 线程而不是 JavaScript 线程上运行动画 [使用 useNativeDriver 选项](/blog/2017/02/14/using-native-driver-for-animated)。你可能还需要将计算密集型工作推迟到 JS 线程空闲时执行（例如使用 `requestIdleCallback`）。您可以使用应用程序内开发菜单中的“FPS Monitor”工具来监视帧速率。 diff --git a/cndocs/interactionmanager.md b/cndocs/interactionmanager.md deleted file mode 100644 index ba6af655187..00000000000 --- a/cndocs/interactionmanager.md +++ /dev/null @@ -1,422 +0,0 @@ ---- -id: interactionmanager -title: 🗑️ InteractionManager ---- - -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - -:::warning[已废弃] -避免长时间运行的工作，改用 [`requestIdleCallback`](global-requestIdleCallback)。 -::: - -InteractionManager 可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证 JavaScript 动画的流畅运行。 - -应用可以通过以下方式安排一个任务在交互和动画完成之后执行： - -```tsx -InteractionManager.runAfterInteractions(() => { - // ...耗时较长的同步执行的任务... -}); -``` - -和其他的延迟计划函数对比： - -- `requestAnimationFrame()` 用来执行在一段时间内控制视图动画的代码。 -- `setImmediate/setTimeout()` 在稍后执行代码。注意这有可能会延迟当前正在进行的动画。 -- `runAfterInteractions()` 在稍后执行代码，不会延迟当前进行的动画。 - -触摸处理系统会把一个或多个进行中的触摸操作认定为'交互'，并且会将 `runAfterInteractions()` 的回调函数延迟执行，直到所有的触摸操作都结束或取消了。 - -InteractionManager 还允许应用注册动画，在动画开始时创建一个交互"句柄"，然后在结束的时候清除它。 - -```tsx -const handle = InteractionManager.createInteractionHandle(); -// 执行动画... (`runAfterInteractions` 中的任务现在开始排队等候) -// 在动画完成之后开始清除句柄： -InteractionManager.clearInteractionHandle(handle); -// 在所有句柄都清除之后，现在开始依序执行队列中的任务 -``` - -`runAfterInteractions` 接受一个普通的回调函数，或是一个 `PromiseTask` 对象，该对象需要带有名为 `gen` 的方法，并返回一个 `Promise`。如果提供的参数是一个 `PromiseTask`， 那么即便它是异步的它也会阻塞任务队列，直到它（以及它所有的依赖任务，哪怕这些依赖任务也是异步的）执行完毕后，才会执行下一个任务。 - -默认情况下，排队的任务会在一次 `setImmediate` 方法中依序批量执行。如果你调用了 `setDeadline` 方法并设定了一个正整数值，则任务只会在设定的时间到达后开始执行。在此之前，任务会通过 `setTimeout` 来挂起并阻塞其他任务执行，这样可以给诸如触摸交互一类的事件留出时间，使应用可以更快地响应用户。 - ---- - -## 示例 - -### 基础示例 - - - - -```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import {useEffect} from 'react'; -import { - Alert, - Animated, - InteractionManager, - Platform, - StyleSheet, - Text, - useAnimatedValue, -} from 'react-native'; -import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; - -const instructions = Platform.select({ - ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', - android: - 'Double tap R on your keyboard to reload,\n' + - 'Shake or press menu button for dev menu', -}); - -const useFadeIn = (duration = 5000) => { - const opacity = useAnimatedValue(0); - - // 在组件挂载时运行动画 - useEffect(() => { - // Animated.timing() 默认会创建一个交互句柄，如果你想禁用这个 - // 行为，可以将 isInteraction 设置为 false。 - Animated.timing(opacity, { - toValue: 1, - duration, - useNativeDriver: true, - }).start(); - }, [duration, opacity]); - - return opacity; -}; - -const Ball = ({onShown}) => { - const opacity = useFadeIn(); - - // 在动画完成后运行一个方法 - useEffect(() => { - const interactionPromise = InteractionManager.runAfterInteractions(() => - onShown(), - ); - return () => interactionPromise.cancel(); - }, [onShown]); - - return ; -}; - -const App = () => { - return ( - - - {instructions} - Alert.alert('Animation is done')} /> - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - ball: { - width: 100, - height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, -}); - -export default App; -``` - - - - -```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import {useEffect} from 'react'; -import { - Alert, - Animated, - InteractionManager, - Platform, - StyleSheet, - Text, - useAnimatedValue, -} from 'react-native'; -import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; - -const instructions = Platform.select({ - ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', - android: - 'Double tap R on your keyboard to reload,\n' + - 'Shake or press menu button for dev menu', -}); - -const useFadeIn = (duration = 5000) => { - const opacity = useAnimatedValue(0); - - // 在组件挂载时运行动画 - useEffect(() => { - // Animated.timing() 默认会创建一个交互句柄，如果你想禁用这个 - // 行为，可以将 isInteraction 设置为 false。 - Animated.timing(opacity, { - toValue: 1, - duration, - useNativeDriver: true, - }).start(); - }, [duration, opacity]); - - return opacity; -}; - -type BallProps = { - onShown: () => void; -}; - -const Ball = ({onShown}: BallProps) => { - const opacity = useFadeIn(); - - // 在动画完成后运行一个方法 - useEffect(() => { - const interactionPromise = InteractionManager.runAfterInteractions(() => - onShown(), - ); - return () => interactionPromise.cancel(); - }, [onShown]); - - return ; -}; - -const App = () => { - return ( - - - {instructions} - Alert.alert('Animation is done')} /> - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - ball: { - width: 100, - height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, -}); - -export default App; -``` - - - - -### 高级示例 - - - - -```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js -import {useEffect} from 'react'; -import { - Alert, - Animated, - InteractionManager, - Platform, - StyleSheet, - Text, -} from 'react-native'; -import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; - -const instructions = Platform.select({ - ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', - android: - 'Double tap R on your keyboard to reload,\n' + - 'Shake or press menu button for dev menu', -}); - -// 你可以创建自定义的交互/动画并添加 -// InteractionManager 支持 -const useCustomInteraction = (timeLocked = 2000) => { - useEffect(() => { - const handle = InteractionManager.createInteractionHandle(); - - setTimeout( - () => InteractionManager.clearInteractionHandle(handle), - timeLocked, - ); - - return () => InteractionManager.clearInteractionHandle(handle); - }, [timeLocked]); -}; - -const Ball = ({onInteractionIsDone}) => { - useCustomInteraction(); - - // 在交互完成后运行一个方法 - useEffect(() => { - InteractionManager.runAfterInteractions(() => onInteractionIsDone()); - }, [onInteractionIsDone]); - - return ; -}; - -const App = () => { - return ( - - - {instructions} - Alert.alert('Interaction is done')} /> - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - ball: { - width: 100, - height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, -}); - -export default App; -``` - - - - -```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx -import {useEffect} from 'react'; -import { - Alert, - Animated, - InteractionManager, - Platform, - StyleSheet, - Text, -} from 'react-native'; -import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; - -const instructions = Platform.select({ - ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', - android: - 'Double tap R on your keyboard to reload,\n' + - 'Shake or press menu button for dev menu', -}); - -// 你可以创建自定义的交互/动画并添加 -// InteractionManager 支持 -const useCustomInteraction = (timeLocked = 2000) => { - useEffect(() => { - const handle = InteractionManager.createInteractionHandle(); - - setTimeout( - () => InteractionManager.clearInteractionHandle(handle), - timeLocked, - ); - - return () => InteractionManager.clearInteractionHandle(handle); - }, [timeLocked]); -}; - -type BallProps = { - onInteractionIsDone: () => void; -}; - -const Ball = ({onInteractionIsDone}: BallProps) => { - useCustomInteraction(); - - // 在交互完成后运行一个方法 - useEffect(() => { - InteractionManager.runAfterInteractions(() => onInteractionIsDone()); - }, [onInteractionIsDone]); - - return ; -}; - -const App = () => { - return ( - - - {instructions} - Alert.alert('Interaction is done')} /> - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - ball: { - width: 100, - height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, -}); - -export default App; -``` - - - - -# 参考 - -## 方法 - -### `runAfterInteractions()` - -```tsx -static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask); -``` - -安排一个函数在所有的交互和动画完成之后运行。返回一个可取消的 promise。 - ---- - -### `createInteractionHandle()` - -```tsx -static createInteractionHandle(): Handle; -``` - -通知管理器有某个交互开始了。 - ---- - -### `clearInteractionHandle()` - -```tsx -static clearInteractionHandle(handle: Handle); -``` - -通知管理器有某个交互已经结束了。 - ---- - -### `setDeadline()` - -```tsx -static setDeadline(deadline: number); -``` - -如果设定了一个正整数值，则会使用 setTimeout 来挂起所有尚未执行的任务。在 eventLoopRunningTime 到达设定时间后，才开始使用一个 setImmediate 方法来批量执行所有任务。 diff --git a/cndocs/modal.md b/cndocs/modal.md index e26a47198fd..4d986c20d2e 100644 --- a/cndocs/modal.md +++ b/cndocs/modal.md @@ -104,14 +104,6 @@ export default App; --- -### 🗑️ `animated` - -:::warning[已弃用] -请改用 [`animationType`](modal.md#animationtype) 属性。 -::: - ---- - ### `animationType` `animationType` 属性控制模态框的动画方式。 diff --git a/cndocs/panresponder.md b/cndocs/panresponder.md index 8c19cb32c52..75659190bf6 100644 --- a/cndocs/panresponder.md +++ b/cndocs/panresponder.md @@ -5,7 +5,7 @@ title: PanResponder `PanResponder`类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作，也可以用于识别简单的多点触摸手势。 -默认情况下`PanResponder`会通过`InteractionManager`来阻止长时间运行的 JS 事件打断当前的手势活动。 +默认情况下，`PanResponder` 会持有一个 interaction handle，以阻止长时间运行的 JS 事件打断当前手势。 它提供了一个对[触摸响应系统](gesture-responder-system.md)响应器的可预测的包装。对于每一个处理函数，它在原生事件之外提供了一个新的`gestureState`对象： diff --git a/cndocs/performance.md b/cndocs/performance.md index 3c444773291..50105b5cf16 100644 --- a/cndocs/performance.md +++ b/cndocs/performance.md @@ -65,7 +65,7 @@ JavaScript 线程的性能在开发模式下是很糟糕的。这是不可避免 ### Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time -"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation. +"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Deferring work until the JS thread is idle (for example, with `requestIdleCallback`) can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation. The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you [set `useNativeDriver: true`](https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated), while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops. diff --git a/cndocs/scrollview.md b/cndocs/scrollview.md index 4ef564ebbc0..9bd05729d9a 100644 --- a/cndocs/scrollview.md +++ b/cndocs/scrollview.md @@ -346,12 +346,10 @@ _仅 iOS 可用的值_ - `'never'` （默认值），点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。 - `'always'`，键盘不会自动收起，ScrollView 也不会捕捉点击事件，但子组件可以捕获。 - `'handled'`，当点击事件被子组件捕获时，键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有 TextInput 的情况下你应该选择此项。 -- `false`，已过时，请使用`'never'`代替。 -- `true`，已过时，请使用`'always'`代替。 -| 类型 | 默认值 | -| --------------------------------------------------------- | --------- | -| enum(`'always'`, `'never'`, `'handled'`, `false`, `true`) | `'never'` | +| 类型 | 默认值 | +| ---------------------------------------- | --------- | +| enum(`'always'`, `'never'`, `'handled'`) | `'never'` | --- diff --git a/cndocs/statusbar.md b/cndocs/statusbar.md index 52e190a5ec8..b822368d5d3 100644 --- a/cndocs/statusbar.md +++ b/cndocs/statusbar.md @@ -61,7 +61,6 @@ const App = () => {