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

Question

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

然后我注意到here提供InteractionManager.runAfterInteractionsapi来解决这个问题，

我需要把大部分耗时长的组件在navigator动画结束后回调，但是我不知道应该在哪里调用，

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

感谢您抽出时间。

Answer 1

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

您可以在此处找到有关如何实现占位符以获得更快转换的示例！

Answer 2

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

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

Answer 3

import {InteractionManager} from "react-native"; 

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({renderPlaceholderOnly: false});
    });
  }

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

Answer 4

下面是一个完整的示例，展示了高性能 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 <Text>loading...</Text>;
    }

    return (
      <ExpensiveComponent/>
    );
  }
}

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

import {AfterInteractions} from 'react-native-interactions';

function MyScene() {
  return (
    <AfterInteractions placeholder={<CheapPlaceholder/>}>
      <ExpensiveComponent/>
    </AfterInteractions>
  );
}

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

how to use InteractionManager.runAfterInteractions make navigator transitions faster

navigator

ios

react-native