在等待 Firebase 身份验证时在 React Native 应用程序中显示加载微调器

Question

我想在我的 React Native 应用程序中实现一个加载旋转器，同时等待 Firebase 身份验证完成。

这是我的登录功能：

async (email, password) => {
    try {
      await auth().signInWithEmailAndPassword(email, password);
    } catch (e) {
      alert(e);
    }
}

预先感谢您的回答！

Answer 1

如果您使用功能组件，您可以使用 React 中的 useState Hook 定义加载状态

const [loading, isLoading] = useState(false);

在您的代码中它将如下所示：

login: async (email, password) => {
      try {
        setLoading(true);
        await auth().signInWithEmailAndPassword(email, password);
        setLoading(false);
      } catch (e) {
        alert(e);
      }
    }

基于该状态，您可以呈现此：

if(isLoading) {
  return (
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
           <ActivityIndicator/>
       </View>
  )
 }