react原生导航性能

Question

我对React本机导航V2有一个问题，那就是在我可以查看下一个屏幕之前，有相当长的等待时间。

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

所以我想知道是否有某些模式可以获得更好的性能，或者是否有方法隐藏加载时间(通过加载循环或转换)？

Answer 1

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

首先保持你的状态，让我们把loading设为true。在你的componentDidMount()中，你可以写下这样的代码：

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

在渲染函数中，在父视图中，执行条件渲染，如

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

使用这种方法。该组件将快速挂载，因为componentDidMount()将快速解析，因为该组件没有要呈现的内容。另外，如果您使用的是flatlist或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>
       );
   }
}