如何在Hello World前5秒显示活动指示器

Question

如何在“ Hello world”之前5秒显示活动指示器。你能帮我吗？

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

Answer 1

尝试一下：

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

export default class App extends React.Component {
  state = {
    showContent: false,
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ showContent: true });
    }, 5000);
  }

  render() {
    const { showContent } = this.state;

    return showContent ? (
      <View>
        <Text>Hello world!</Text>
      </View>
    ) : (
      <View>
        <ActivityIndicator />
      </View>
    );
  }
}