使用AWS Authenticator时React Native启动屏无法隐藏如何解决

问题原因 #

withAuthenticator是AWS提供的高阶组件，默认会在用户完成登录/注册身份校验前，优先渲染自带的身份验证UI，你原本的App组件此时并未挂载，因此内部的useEffect不会执行，导致启动屏无法隐藏。

解决方案 #

方案1：根组件独立封装（适用于打开App就需要隐藏启动屏的场景） #

在App组件外层加一层没有被withAuthenticator包裹的根组件，把隐藏启动屏的逻辑移到根组件的useEffect中即可：

import Amplify from 'aws-amplify';
import config from './src/aws-exports';
import { withAuthenticator } from 'aws-amplify-react-native';
import Auth from '@aws-amplify/auth';
import SplashScreen from 'react-native-splash-screen';
import { useEffect } from 'react';
import { View } from 'react-native';

Amplify.configure(config);

function App (){
  // 原有业务逻辑不变
  return ( 
    <View>
    </View>
  );
};

// 封装未被高阶组件包裹的根组件
const AuthenticatedApp = withAuthenticator(App);
const Root = () => {
  useEffect(() => {
    SplashScreen.hide();
  }, []);

  return <AuthenticatedApp />
}

export default Root;

方案2：监听身份验证状态（适用于登录完成后才隐藏启动屏的场景） #

如果需要用户完成登录后再隐藏启动屏，可通过两种方式实现：

1. 直接给withAuthenticator传入状态变更回调：

// App组件内部无需保留SplashScreen.hide()相关逻辑
function App (){
  return ( 
    <View>
    </View>
  );
};

export default withAuthenticator(App, {
  onStateChange: (authState) => {
    // 登录完成后隐藏启动屏
    if (authState === 'signedIn') {
      SplashScreen.hide();
    }
  }
});

2. 根组件监听Auth事件：

import Amplify, { Hub } from 'aws-amplify';
import config from './src/aws-exports';
import { withAuthenticator } from 'aws-amplify-react-native';
import Auth from '@aws-amplify/auth';
import SplashScreen from 'react-native-splash-screen';
import { useEffect, useState } from 'react';
import { View } from 'react-native';

Amplify.configure(config);

function App (){
  // 原有业务逻辑不变
  return ( 
    <View>
    </View>
  );
};

const Root = () => {
  const [isSignedIn, setIsSignedIn] = useState(false);

  useEffect(() => {
    // 监听登录事件
    const removeListener = Hub.listen('auth', (data) => {
      if (data.payload.event === 'signIn') {
        setIsSignedIn(true);
        SplashScreen.hide();
      }
    });

    // 初始化检查是否已登录
    Auth.currentAuthenticatedUser()
      .then(() => {
        setIsSignedIn(true);
        SplashScreen.hide();
      })
      .catch(() => setIsSignedIn(false));

    return () => removeListener();
  }, []);

  return isSignedIn ? <App /> : withAuthenticator(() => <></>)();
}

export default Root;

内容的提问来源于stack exchange，提问作者Peaked