时间戳

首页 > 解决方案 > SpashScreen React Native

react-native - SpashScreen React Native

问题描述

因此，我尝试为我在 android 上的 react 本机应用程序创建启动画面，但我遇到了一个问题，由于我的 aws-amplify withAuthenticator，它似乎无法使用 SpashScreen.hide()。它只是不断停留在启动画面上

const AppContainer = createAppContainer(App);

class RealApp extends React.Component {

  componentDidMount() {
     SplashScreen.hide();
  }
  constructor(props) {
    super(props);

  }

  render() {

    return( 

        <AppContainer></AppContainer>
    );
  }
}

export default withAuthenticator(RealApp, {
  signUpConfig,
  usernameAttributes
});

有了它，它就会一直停留在 SplashScreen Image 上。然后我稍微改变了一下，像这样摆脱了“WithAuthenticator”：

const AppContainer = createAppContainer(App);

export default class RealApp extends React.Component {

  componentDidMount() {
     SplashScreen.hide();
  }
  constructor(props) {
    super(props);

  }

  render() {

    return( 

        <AppContainer></AppContainer>
    );
  }
}

从某种意义上说，它显示了 SplashScreen 然后是我的 Amplify 登录页面，但底部导航栏已经与登录页面一起呈现，因此可以切换到不同的页面，只是放大登录 UI 仍在主页上等。

标签： react-nativesplash-screenaws-amplify

解决方案

无需隐藏启动画面，只需使用 setTimeout 功能将您自己导航到另一个屏幕

componentDidMount() {
    globalAny.isEditable = true;

    if (Constant.isIosDevice()) {
      if (CommonTask != undefined) {
        CommonTask.getStatusHeight((error: any, events: any) => {
          // console.log(events);
          Constant.setStatusHeight({
            top: events.top,
            bottom: events.bottom
          });
        });
      }
    } else {
      Constant.setStatusHeight({
        top: StatusBar.currentHeight,
        bottom: 0
      });
    }

    // AsyncStorage.setItem("defaultUserData","0");
    setTimeout(() => {
      this._token();
    }, 3000);
  }

推荐阅读