设置用户配置文件后导航到主屏幕

Question

我已经弄清楚如何使用 React-navigation 和 firebase-authentication 从 signupScreen 导航到 homeScreen，但我添加了一个额外的屏幕。这是配置文件设置屏幕。我的问题是，在从用户那里获取数据后，我无法从设置屏幕导航到主屏幕。完成按钮应该是 'addData'，然后导航到主屏幕，但我无法弄明白。

请询问您是否需要更多信息。这是我的代码的一部分。我应该添加什么？

//...
//This adds the users data onto firebase
const addData = () => {
    try {
      const docRef = addDoc(collection(db, "users"), {
        nickname,
        bio,
        selectedImage,
        dbEmail,
      });
      console.log("Document written with ID:", docRef.id);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  };

  //Overall UI
  return (
//Once 'Finish' is pressed, it saves the data onto FireStore and should navigate to homeScreen
    <View style={styles.all}>
      <Text style={styles.title}>Profile Setup</Text>
      <View style={styles.selectionView}>
        <TouchableOpacity style={styles.completebtn} onPress={onSignOut}>
          <Text style={styles.backtxt}>Back</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.completebtn} onPress={addData}>
          <Text style={styles.completetxt}>Finish</Text>
        </TouchableOpacity>
      </View>
//...

Answer 1

这取决于ProfileSetupScreen是否是导航器中定义的Screen。如果是，那么导航框架会将 navigation 属性传递给 ProfileSetupScreen，您可以通过 screen props.

按如下方式使用它

const ProfileSetupScreen = ({navigation}) => {

  const addData = () => {
    try {
      const docRef = addDoc(collection(db, "users"), {
        nickname,
        bio,
        selectedImage,
        dbEmail,
      });
      console.log("Document written with ID:", docRef.id);
    navigation.navigate(”HomeScreen”)
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  };

  return (…)
}

注意，navigation.navigate(”HomeScreen“) 采用我们要导航到的屏幕的名称，并且在导航器中定义了该名称，因此如果您的主屏幕在那里定义了不同的名称，那么您需要使用那个名字。

如果您的 ProfileSetupScreen 不是导航器中的屏幕，则导航道具将不会传递到屏幕。

在这种情况下，您有两种选择。要么将导航道具从导航器中定义的屏幕的父屏幕向下传递到组件，要么使用 useNavigation 挂钩，如下所示。


const ProfileSetupScreen = (props) => {
   const navigation = useNavigation()
…

}

设置用户配置文件后导航到主屏幕

Navigating to the homeScreen after setting up the user's profile

javascript

react-native

react-navigation

google-cloud-firestore