react-native - 反应原生导航性能

Question

我遇到了 React Native Navigation V2 的问题，即等待很长时间才能查看下一个屏幕。

我读到这似乎很正常，因为 react native 必须渲染新屏幕的所有组件。

所以我想知道是否有某些模式可以获得更好的性能或隐藏加载时间的方法（通过加载圆圈或转换）？

Answer 1

是的，如果你有很多组件要渲染，通常会发生这种情况。React 导航等待组件挂载，然后切换到屏幕。例如，如果一个屏幕需要 2 秒来渲染所有组件。然后反应导航将需要 2 秒才能切换到该屏幕。有一种方法可以缩短切换到下一个屏幕的时间。你可以使用intreractionManager或者你可以做类似的事情，

首先保持你的状态，让我们说loading真。在你的componentDidMount()你可以写这样的东西：

setTimeout(() => this.setState({ loading: false }), 0);

在您的渲染功能中，在您的父视图中，进行条件渲染，例如

{this.state.loading && <View> 
... your components
</View>}

用这种方法。该组件将快速安装，componentDidMount()因为该组件没有要渲染的内容。此外，如果您使用flatlistor listview，您可以将道具initialRender赋予 3 或类似的东西以减少加载时间。所以。最初只渲染一个空视图，然后渲染其他所有内容。

Answer 2

感谢@Wainage 的建议，我使用了 InteractionManager

import PropTypes from "prop-types";
import React from "react";
import {
    InteractionManager,
    Text,
   View,
} from "react-native";

interface State {
   ready: boolean;
   sortedJobs: any[];
}


export default class ProviderJobs extends React.Component<Props, State> {
    constructor(props) {
       super(props);
       this.state = {
          ready: false,
       };
    }

   public componentDidMount() {
       InteractionManager.runAfterInteractions(() => {
           // Do expensive Stuff such as loading
           this.setState({
               ready: true,
               sortedJobs: groupJobs(this.props.jobs), // loading Jobs in my Case
        });

    });
}

   public render() {
       if (!this.state.ready || this.state.sortedJobs.length == 0) {
           return <LoadingCircle/>;
       }


       return (
           <View>
               <DisplayJobs jobs ={this.state.sortedJobs}>
           </View>
       );
   }
}