加载多个启动屏幕/加载超时屏幕反应本机 expo

Question

我正在尝试在我的注册页面加载之前加载两个连续的初始屏幕，我希望每个初始屏幕都显示一段时间，我已经尝试使用此代码，但它对我来说效果不佳。 这是我的 App.js：

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import TechInLifeSplashScreen from "./Screens/TechInLifeSplashScreen";
import NewLookSplashScreen from "./Screens/NewLookSplashScreen";
import SignupScreen from "./Screens/SignupScreen";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadingTIL: true,
      loadingNL: false,
      loadingWelcome: false,
    };
  }

  componentDidMount() {
    const TILTimeout = setTimeout(() => {
      this.setState({ loadingTIL: false, loadingNL: true });
      this.showWelcome();
    }, 3000);
  }

  showWelcome = () => {
    setTimeout(() => {
      this.setState({ loadingNL: false, loadingWelcome: true });
    }, 3000);
  };

  render() {
    if (this.state.loadingTIL) {
      return <TechInLifeSplashScreen></TechInLifeSplashScreen>;
    } else if (this.state.loadingNL) {
      return <NewLookSplashScreen></NewLookSplashScreen>;
    } else if (this.state.loadingWelcome)
      return (
        <View style={styles.container}>
          <SignupScreen></SignupScreen>
        </View>
      );
    else return null;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

谁能帮我用这段代码按顺序加载我的三个屏幕？ 谢谢。

Answer 1

您可以通过针对特定超时调用clearTimeout()来清除超时。 但是，为此，您应该在组件 scope 中获取访问参考。 您可以为此使用this关键字。 例如，您可以使用this.TILTimeout而不是const TILTimeout 。

以下是做你想做的更好的方法。

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import TechInLifeSplashScreen from "./Screens/TechInLifeSplashScreen";
import NewLookSplashScreen from "./Screens/NewLookSplashScreen";
import SignupScreen from "./Screens/SignupScreen";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadingTIL: true,
      loadingNL: false,
      loadingWelcome: false,
    };
  }

  componentDidMount() {
    this.showNewLook();
  }

  componentWillUnmount() {
    clearTimeout(this.TILTimeout);
    clearTimeout(this.NLTimeout);
  }

  showNewLook = () => {
    this.TILTimeout = setTimeout(() => {
      this.setState({ loadingTIL: false, loadingNL: true });
      this.showWelcome();
    }, 3000);
  }

  showWelcome = () => {
    this.NLTimeout = setTimeout(() => {
      this.setState({ loadingNL: false, loadingWelcome: true });
    }, 3000);
  };

  render() {
    if(this.state.loadingTIL) {
      return <TechInLifeSplashScreen/>
    }
    if(this.state.loadingNL) {
      return <NewLookSplashScreen/>
    }
    if(this.state.loadingWelcome) {
      return (
        <View style={styles.container}>
          <SignupScreen/>
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});