每当一个屏幕提交将数据发送到另一个显示该提交数据的屏幕的表单时，我都试图更新route.params。但是它只是导航，而route.params仍未定义。这是我的导航架构。
抽屉=>标签=>堆叠（每个标签）
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中调用的Tab导航组件。每个选项卡屏幕都是一个堆栈：主页，收藏夹，配置文件，设置。
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>
);
我正在尝试让HomeScreen通过navigation.navigate发送数据到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>
我正在ProfileScreen.js中使用一个Flatlist来列出HomeScreen.js中的数据。 我还使用useEffect（）来监听此数据的提交。
ProfileScreen.js
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>
);
};
ProfileScreen.js FlatList
<View style={styles.myRecipesBody}>
<FlatList
keyExtractor={(item) => item.key}
data={recipeList}
renderItem={_renderItem}
/>
</View>
我想知道这个问题是由于我的导航体系结构的性质造成的，还是我听错了route.params？谢谢！