反应原生导航性能答案

【问题标题】：react native navigation performance反应原生导航性能
【发布时间】：2018-10-15 15:28:53
【问题描述】：

我遇到了 React Native Navigation V2 的问题，即在我可以查看下一个屏幕之前等待很长时间。

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

所以我想知道是否有某些模式可以提高性能或隐藏加载时间的方法（通过加载圆圈或过渡）？

【问题讨论】：

使用InteractionManager

标签： react-native react-native-navigation react-native-navigation-v2

【解决方案1】：

感谢@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>
       );
   }
}

【讨论】：

【解决方案2】：

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

首先保持你的状态，假设loading 为真。在您的componentDidMount() 中您可以写如下内容：

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

在你的渲染函数中，在你的父视图中，做一个条件渲染，喜欢

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

采用这种方法。该组件将快速安装，因为componentDidMount() 将快速解析，因为该组件没有要渲染的内容。此外，如果您使用 flatlist 或 listview，您可以将属性 initialRender 设置为 3 或类似的值以减少加载时间。所以。最初只渲染一个空视图，然后渲染其他所有内容。

【讨论】：