如何使用InteractionManager.runAfterInteractions使导航器转换更快

由于逻辑复杂，我必须在this.props.navigator.push() ，慢导航器转换使应用程序不可用时渲染许多组件。

然后我注意到这里提供InteractionManager.runAfterInteractions api来解决这个问题，

我需要在导航器动画完成后将大部分消耗很长时间的组件带回来，但我不知道在哪里可以调用它，

也许一个简单的例子就足够了，

谢谢你的时间。

Answer 1

以下是高性能Navigator场景的完整示例：

 import {Component} from 'react'; import {InteractionManager, Text} from 'react-native'; class OptimizedScene extends Component { state = {interactionsComplete: false}; componentDidMount() { InteractionManager.runAfterInteractions(() => { this.setState({interactionsComplete: true}); }); } render() { if (!this.state.interactionsComplete) { return loading...; } return (  ); } } 

这已被提取到库中以使其更容易：

 import {AfterInteractions} from 'react-native-interactions'; function MyScene() { return ( }>   ); } 

Answer 2

看看https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

在那里，您可以找到如何实现占位符以获得更快转换的示例！

Answer 3

您应该将保持JS线程繁忙的任何代码传递给InteractionManager，例如

 InteractionManager.runAfterInteractions(() => { someLongTask() // or animations, or whatever }) 

Answer 4

 import {InteractionManager} from "react-native"; componentDidMount() { InteractionManager.runAfterInteractions(() => { this.setState({renderPlaceholderOnly: false}); }); } 

参考： https ： //facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions