Question

当我单击登录按钮时，我试图将登录屏幕更改为主屏幕。用户已经创建，并显示在Firebase的“身份验证”选项卡以及我为此创建的Cloud Firestore数据库中。我认为我的“导航”部分出了点问题，但是我不相信我在使用嵌套的导航器...这是App.js上的导航代码。如果有人可以看一下此代码并看到如果您发现有任何问题，将不胜感激。不知道从哪里转。

<NavigationContainer>
  <Stack.Navigator>
    { user ? (
      <Stack.Screen name="Home">
        {props => <HomeScreen {...props} extraData={user} />}
      </Stack.Screen>
    ) : (
      <>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Registration" component={RegistrationScreen} />
      </>
    )}
  </Stack.Navigator>
</NavigationContainer>

另一个用户向我指出，它不呈现主屏幕，因为当我单击“登录”按钮时未分配用户。这是我用于“登录”按钮的方法。有人在这里看到任何问题吗？

const onLoginPress = () => {
  firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((response) => {
            const uid = response.user.uid
            const usersRef = firebase.firestore().collection('users')
            usersRef
                .doc(uid)
                .get()
                .then(firestoreDocument => {
                    if (!firestoreDocument.exists) {
                        alert("User does not exist anymore.")
                        return;
                    }
                    const user = firestoreDocument.data()
                    navigation.navigate('Home', {user})
                })
                .catch(error => {
                    alert(error)
                });
        })
        .catch(error => {
            alert(error)
        })
}

感谢您的帮助！

Answer 1

当未定义用户时，不会呈现主屏幕，这就是为什么当您从LoginScreen导航到Home时会出现错误的原因。您可以无条件渲染主屏幕，并将initialScreen设置为Login。

<NavigationContainer>
  <Stack.Navigator initialRouteName="LoginScreen">
      <Stack.Screen name="Home">
        {props => <HomeScreen {...props} extraData={user} />}
      </Stack.Screen>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Registration" component={RegistrationScreen} />
  </Stack.Navigator>
</NavigationContainer>

React Native：任何导航器都未处理带有效载荷（blahblah）的“ NAVIGATE”操作。您是否有一个名为“首页”的屏幕？

1 个答案: