更换屏幕时，ActivityIndi​​cator没有出现

Question

我有一个带列表的视图，其中有45个项目要加载图像。我希望当您转到此页面时，在加载过程中会出现加载。

但是不会出现负载。屏幕冻结2秒，然后显示视图

我在TabNavigator中使用React Navigation。 在菜单中，有一个按钮可以转到该视图。

我试图放置一个setState，但是它不起作用。

我的代码：

class Exhibitors extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true
        }
    }

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

    render() {
        if (this.state.isLoading) {
            return this._displayLoading(); // Simple Activity Indicator
        }
        // My List
    }

    _displayLoading() {
        return (
            <View>
                <ActivityIndicator size='large' />
            </View>
        )
    }
}

我的印象是我的应用程序在显示负载之前先加载视图。

当前，当我单击菜单按钮时，屏幕冻结，然后显示带有列表的视图。

我现在想要的是，一旦我点击菜单，新视图就会随加载一起打开。

Answer 1

尝试使用三元运算符。

用法

class Exhibitors extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true
        }
    }

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

      render() {
    return (
    this.state.isLoading === true ?  (
      <View style={{flex:1,justifyContent: 'center',alignItems:"center"}}>
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
      </View>
    )
    :
     (
      <View ...
     )
    );
  }
}

示例

import React, { Component } from 'react'
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  View,
} from 'react-native'

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state={
      loading: false
    }
  }

  componentDidMount() {
    this.setState(state => ({
  ...state,
  loading: true 
}));
  }
  render() {
    return (
    this.state.loading === false ?  (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
      </View>
    )
    :
     (
      <View style={[styles.container, styles.horizontal]}>
       <Text>ActivityIndicator</Text>
      </View>
     )
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})