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()清除特定的超时来清除超时。但是，为此，您应该在组件范围内获取要访问的引用。您可以为此使用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",
  },
});

加载多个启动屏幕/加载超时的屏幕会响应本机博览会

1 个答案: