Javascript React Native v5:无法使用navigation.navigate（）从其他屏幕组件接收更新的route.params

每次屏幕提交表单时，我都会尝试更新route.params，该表单会将数据发送到另一个显示提交数据的屏幕。但它只是导航，route.params仍然未定义。这是我的导航架构

抽屉=>Tab=>Stack（针对每个选项卡）

App.js

return (
      <>
        <NavigationContainer>
          <Drawer.Navigator
            drawerContent={(props) => <DrawerContent {...props} />}
          >
            <Drawer.Screen
              name="Main"
              component={BottomTabScreen}
              options={{
                title: "Overview",
                headerLeft: () => <Icon.Button name="md-menu" size={25} />,
              }}
            />
          </Drawer.Navigator>
        </NavigationContainer>
      </>
    );

返回(
}
>
,
}}
/>
);

这是MainTabScreen.js中大部分导航的位置。它包含在App.js中调用的选项卡导航组件。每个选项卡屏幕都是一个堆栈：主页、收藏夹、配置文件、设置

MainTabScreen.js

  <Tab.Navigator
    initialRouteName="Home"
    tabBarOptions={{
      activeTintColor: "#e91e63",
    }}
  >
    <Tab.Screen
      name="Home"
      component={HomeStackScreen}
      options={{
        tabBarLabel: "Home",
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
    <Tab.Screen
      name="Favorites"
      component={FavoritesStackScreen}
      options={{
        tabBarLabel: "Favorites",
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="bell" color={color} size={size} />
        ),
        tabBarBadge: 3,
      }}
    />
    <Tab.Screen
      name="Profile"
      component={ProfileStackScreen}
      options={{
        tabBarLabel: "Profile",
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="account" color={color} size={size} />
        ),
      }}
    />
    <Tab.Screen
      name="Settings"
      component={SettingsStackScreen}
      options={{
        tabBarLabel: "Settings",
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="cogs" color={color} size={size} />
        ),
      }}
    />
  </Tab.Navigator>
);

export default BottomTabScreen;

// //HOME
const HomeStackScreen = ({ navigation }) => (
  <HomeStack.Navigator
    initialRouteName="HomeScreen"
    headerMode="screen"
    screenOptions={{
      headerTintColor: "white",
      headerStyle: { backgroundColor: "tomato" },
      headerTitleStyle: { fontFamily: "BalsamiqSans_700Bold", fontSize: 30 },
    }}
  >
    <HomeStack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        title: "Home",
        headerLeft: () => (
          <Icon.Button
            name="md-menu"
            backgroundColor="tomato"
            onPress={() => navigation.openDrawer()}
            size={25}
          />
        ),
      }}
    />
    <HomeStack.Screen
      name="Explore"
      component={ExploreScreen}
      options={{
        title: "Explore",
        headerLeft: () => (
          <Icon.Button
            name="arrow-back-outline"
            backgroundColor="tomato"
            onPress={() => navigation.goBack()}
            size={25}
          />
        ),
      }}
    />
  </HomeStack.Navigator>
);

//Favorites
const FavoritesStackScreen = ({ navigation }) => (
  <FavoritesStack.Navigator
    initialRouteName="FavoritesScreen"
    headerMode="screen"
    screenOptions={{
      headerTintColor: "white",
      headerStyle: { backgroundColor: "tomato" },
      headerTitleStyle: { fontFamily: "BalsamiqSans_700Bold", fontSize: 30 },
    }}
  >
    <FavoritesStack.Screen
      name="Favorites"
      component={FavoritesScreen}
      options={{
        title: "Favorites",
        headerLeft: () => (
          <Icon.Button
            name="md-menu"
            backgroundColor="tomato"
            onPress={() => navigation.openDrawer()}
            size={25}
          />
        ),
      }}
    />
  </FavoritesStack.Navigator>
);

//Profile
const ProfileStackScreen = ({ navigation, route }) => (
  <ProfileStack.Navigator
    initialRouteName="ProfileScreen"
    headerMode="screen"
    screenOptions={{
      headerTintColor: "white",
      headerStyle: { backgroundColor: "tomato" },
      headerTitleStyle: { fontFamily: "BalsamiqSans_700Bold", fontSize: 30 },
    }}
  >
    <ProfileStack.Screen
      name="Profile"
      component={ProfileScreen}
      options={{
        title: "Profile",
        headerLeft: () => (
          <Icon.Button
            name="md-menu"
            backgroundColor="tomato"
            onPress={() => navigation.openDrawer()}
            size={25}
          />
        ),
      }}
    />
  </ProfileStack.Navigator>
);

//SETTINGS
const SettingsStackScreen = ({ navigation }) => (
  <SettingsStack.Navigator
    initialRouteName="HomeScreen"
    headerMode="screen"
    screenOptions={{
      headerTintColor: "white",
      headerStyle: { backgroundColor: "tomato" },
      headerTitleStyle: { fontFamily: "BalsamiqSans_700Bold", fontSize: 30 },
    }}
  >
    <SettingsStack.Screen
      name="Settings"
      component={Settings}
      options={{
        title: "Settings",
      }}
    />
  </SettingsStack.Navigator>
);

(
),
}}
/>
(
),
塔巴贝奇：3，
}}
/>
(
),
}}
/>
(
),
}}
/>
);
导出默认屏幕；
////家
const HomeStackScreen=（{navigation}）=>(
(
navigation.openDrawer（）}
大小={25}
/>
),
}}
/>
(
navigation.goBack（）}
大小={25}
/>
),
}}
/>
);
//最爱
常量FavoriteSTackScreen=（{navigation}）=>(
(
navigation.openDrawer（）}
大小={25}
/>
),
}}
/>
);
//侧面图
const ProfileStackScreen=（{navigation，route}）=>(
(
navigation.openDrawer（）}
大小={25}
/>
),
}}
/>
);
//背景
const SettingsStackScreen=（{navigation}）=>(
);

我正在尝试让主屏幕通过导航发送数据。导航到ProfileScreen。我使用了一个模态来创建这个表单

HomeScreen.js

      <Modal visible={modalOpen} animationType="slide">
        <View style={StyleSheet.modalContent}>
          <MaterialIcons
            name="close"
            size={24}
            onPress={() => setModal(false)}
          />
          <ImageBackground
            style={styles.modalTop}
            source={require("../img/modalTop.jpg")}
          >
            <Text style={styles.modalTopText}>Create.</Text>
            <Text style={styles.modalTopText}>Share.</Text>
          </ImageBackground>
          
        {/*Button to submit and send data to ProfileScreen*/}
          <MaterialIcons
            name="add"
            size={24}
            onPress={() => {
              setI((prev) => prev + 1);
              navigation.navigate("Profile", recipe);
            }}
          />
          {/*Name of recipe input */}

          <TextInput
            value={recipe.name}
            onChangeText={(e) => handleChange(e, "name")}
            placeholder="Put name of Meal"
          />

          {/*Time of recipe input */}
          <TextInput
            onChangeText={(e) => handleChange(e, "time")}
            placeholder="Give estimate how long"
          />

          {/*Steps of recipe input */}
          <TextInput
            value={recipe.steps}
            onChangeText={(e) => handleChange(e, "steps")}
            placeholder="The steps"
          />

          {/*Image of recipe input */}
          <TextInput
            value={recipe.image}
            onChangeText={(e) => handleChange(e, "steps")}
            placeholder="url of image"
          />
        </View>
      </Modal>

  const [followers, setFollower] = useState(0);
  const [following, setFollowing] = useState(0);
  // Our list that receives the data
  const [recipeList, setRecipeList] = useState([]);
  const [params, setParams] = useState();

  useEffect(() => {
    if (route.params !== undefined) {
      setRecipeList((prev) => [...prev, route.params]);
    }
  }, [route.params]);

  //render each MyRecipe
  const _renderItem = ({ item }) => {
    return (
      <View style={styles.recipeContent}>
        <Text style={styles.recipeContentName}>{item.name}</Text>
        <View style={styles.ImageContainer}>
          <Avatar.Image style={styles.recipeImage} size={80}></Avatar.Image>
        </View>
        <Text style={styles.recipeContentTime}>{item.time} mins</Text>
        {(() => {
          let a = item.steps;
          let res = [];
          a.forEach((step) => {
            res.push(<Text style={styles.recipeContentStep}>{step}</Text>);
          });
          return res;
        })()}
      </View>
    );
  };

setModal（假）}
/>
创造。
分享。
{/*按钮提交数据并将数据发送到ProfileScreen*/}
{
setI（（上一个）=>上一个+1）；
导航。导航（“配置文件”，配方）；
}}
/>
{/*配方输入的名称*/}
handleChange（e，“name”）}
占位符=“输入餐名”
/>
{/*配方输入时间*/}
handleChange（e，“时间”）}
占位符=“估计需要多长时间”
/>
{/*配方输入步骤*/}
handleChange（e，“步骤”）}
占位符=“步骤”
/>
{/*配方输入的图像*/}
handleChange（e，“步骤”）}
占位符=“图像的url”
/>

我正在使用ProfileScreen.js中的平面列表来列出HomeScreen.js中的数据。 我还使用useffect（）来监听这些数据的提交

ProfileScreen.js

      <Modal visible={modalOpen} animationType="slide">
        <View style={StyleSheet.modalContent}>
          <MaterialIcons
            name="close"
            size={24}
            onPress={() => setModal(false)}
          />
          <ImageBackground
            style={styles.modalTop}
            source={require("../img/modalTop.jpg")}
          >
            <Text style={styles.modalTopText}>Create.</Text>
            <Text style={styles.modalTopText}>Share.</Text>
          </ImageBackground>
          
        {/*Button to submit and send data to ProfileScreen*/}
          <MaterialIcons
            name="add"
            size={24}
            onPress={() => {
              setI((prev) => prev + 1);
              navigation.navigate("Profile", recipe);
            }}
          />
          {/*Name of recipe input */}

          <TextInput
            value={recipe.name}
            onChangeText={(e) => handleChange(e, "name")}
            placeholder="Put name of Meal"
          />

          {/*Time of recipe input */}
          <TextInput
            onChangeText={(e) => handleChange(e, "time")}
            placeholder="Give estimate how long"
          />

          {/*Steps of recipe input */}
          <TextInput
            value={recipe.steps}
            onChangeText={(e) => handleChange(e, "steps")}
            placeholder="The steps"
          />

          {/*Image of recipe input */}
          <TextInput
            value={recipe.image}
            onChangeText={(e) => handleChange(e, "steps")}
            placeholder="url of image"
          />
        </View>
      </Modal>

  const [followers, setFollower] = useState(0);
  const [following, setFollowing] = useState(0);
  // Our list that receives the data
  const [recipeList, setRecipeList] = useState([]);
  const [params, setParams] = useState();

  useEffect(() => {
    if (route.params !== undefined) {
      setRecipeList((prev) => [...prev, route.params]);
    }
  }, [route.params]);

  //render each MyRecipe
  const _renderItem = ({ item }) => {
    return (
      <View style={styles.recipeContent}>
        <Text style={styles.recipeContentName}>{item.name}</Text>
        <View style={styles.ImageContainer}>
          <Avatar.Image style={styles.recipeImage} size={80}></Avatar.Image>
        </View>
        <Text style={styles.recipeContentTime}>{item.time} mins</Text>
        {(() => {
          let a = item.steps;
          let res = [];
          a.forEach((step) => {
            res.push(<Text style={styles.recipeContentStep}>{step}</Text>);
          });
          return res;
        })()}
      </View>
    );
  };

const[followers，setFollower]=useState（0）；
const[following，setFollowing]=useState（0）；
//我们接收数据的列表
常量[recipeList，setRecipeList]=useState（[]）；
const[params，setParams]=useState（）；
useffect（（）=>{
if（route.params！==未定义）{
setRecipeList（（prev）=>[…prev，route.params]）；
}
}，[route.params]）；
//呈现我的每一个食谱
常量_renderItem=（{item}）=>{
返回(
{item.name}
您正在同一个项目中混合使用react navigation v4和v5。请仅使用其中的一个。您可以指定我在哪里使用v4吗？withNavigation从react navigation v4导出。它现在从包中提取并作为兼容层提供。您可以在此处或此处阅读有关导航操作的更多信息。这对我的能力有何影响ty要在屏幕之间发送数据吗？不，在您的git repo中，您正在使用v4软件包中的withNavigator包装主屏幕。我在上一篇评论中解释了这一点。您在同一个项目中混合了react navigation v4和v5。请仅使用其中的一个。您能指定我使用v4的位置吗？withNavigation从react navigation v4导出。它是now从软件包中提取并作为兼容层提供。您可以在此处或此处阅读更多关于导航操作的信息。这对我在屏幕之间发送数据的能力有何影响？不，在您的git repo中，您正在使用v4软件包中的withNavigator包装主屏幕。我在上一篇评论中解释了这一点