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

问题描述

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

Because of complex logic, I have to render many components when this.props.navigator.push(), slow navigator transitions make app unavailable.

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

then I notice here provide InteractionManager.runAfterInteractions api to solve this problem,

导航器动画完成后，我需要把大部分消耗很长时间的组件带回来，但我不知道应该把它叫到哪里，

I need bring most of components which consumed long time to callback after navigator animation finished, but I don't know where should I call it,

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

maybe a simple example is enough,

感谢你的时间。

推荐答案

这是一个表演者的完整例子场景可能如下所示：

Here's a full example of what a performant Navigator scene might look like:

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/>
    );
  }
}

这已被提取到，使其更容易：

This has been extracted into a library to make it even easier:

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

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

这篇关于如何使用InteractionManager.runAfterInteractions使导航器转换更快的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！