React Native 使用参数导航到另一个堆栈

Question

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { enableScreens } from 'react-native-screens';
import { createNativeStackNavigator } from 'react-native-screens/native-stack';

enableScreens();
const Tab = createBottomTabNavigator();
const RootStack = createNativeStackNavigator();
const WardrobeStack = createNativeStackNavigator();
const OutfitStack = createNativeStackNavigator();
const CreateLookStack = createNativeStackNavigator();
const ProfileStack = createNativeStackNavigator();

export const WardrobeNavigator = () => {
return (
<WardrobeStack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName='Wardrobe'>
<WardrobeStack.Screen name="Wardrobe" component={Wardrobe} /> // <== navigate to here with params
<WardrobeStack.Screen name="Profile" component={Profile} />
<WardrobeStack.Screen name="AddFirstItem" component={AddFirstItem} />
<WardrobeStack.Screen name="RetakeContinue" component={RetakeContinue} />
<WardrobeStack.Screen name="CategoryBrand" component={CategoryBrand} />
<WardrobeStack.Screen name="DeleteCategory" component={DeleteCategory} />
</WardrobeStack.Navigator>
);
}
export const OutfitNavigator = () => {
return (
<OutfitStack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName='LookBook'>
<OutfitStack.Screen name="Outfits" component={Outfits} />
<OutfitStack.Screen name="LookBook" component={LookBook} />
<OutfitStack.Screen name="LookBookList" component={LookBookList} /> // <== navigate from here
<OutfitStack.Screen name="Profile" component={Profile} />
<OutfitStack.Screen name="ShoppingList" component={ShoppingList} />
</OutfitStack.Navigator>
);
}
export const CreateLookNavigator = () => {
return (
<CreateLookStack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName="NewLook">
<CreateLookStack.Screen name="NewLook">
{props => (
<NewLook
{...props}
initialParams={{
lookSaveType: AppConstants.DEFAULT_LOOK_SAVE_TYPE,
}}
/>
)}
</CreateLookStack.Screen>
<CreateLookStack.Screen name="SaveLook" component={SaveLook} />
</CreateLookStack.Navigator>
);
}
export const ProfileNavigator = () => {
return (
<ProfileStack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName='ProfileOnbarding'>
<ProfileStack.Screen name="ProfileOnbarding" component={ProfileOnboarding} />
<ProfileStack.Screen name="ProfileAllSet" component={ProfileAllSet} />
</ProfileStack.Navigator>
);
}
export const RootNavigator = () => {
return (
<RootStack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName='Main'
mode='modal'>
<RootStack.Screen name="Main" component={BottomTabNavigator} />
<RootStack.Screen name="Brands" component={BrandStores} />
<RootStack.Screen name="ItemScreen" component={ItemScreen} />
<RootStack.Screen name="CreateLook" component={CreateLookNavigator} />
<RootStack.Screen name="ShoppingList" component={ShoppingList} />
<RootStack.Screen name="ProfileOnboarding" component={ProfileNavigator} />
{/* add full screen appear as modal */}
</RootStack.Navigator>
);
}
export const BottomTabNavigator = () => {
return (
<Tab.Navigator
initialRouteName="Outfits"
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
switch (route.name) {
case 'Explore':
return focused ? <ActiveTeleIcon /> : <InactiveTeleIcon />
case 'Bookings':
return focused ? <ActiveBookingIcon /> : <InactiveBookingIcon />
case 'Wardrobe':
return focused ? <ActiveWardrobeIcon /> : <InactiveWardrobeIcon />
case 'Outfits':
return focused ? <ActiveOutfitsIcon /> : <InactiveOutfitsIcon />
case 'Chat':
return focused ? <ActiveChatIcon /> : <InactiveChatIcon />
}
},
})}
tabBarOptions={{
activeTintColor: Colors.PRIMARY,
inactiveTintColor: Colors.SECONDARY_TEXT,
statusBarStyle: 'light-content',
style: styles.tabContainer,
labelStyle: styles.labelStyle,
allowFontScaling: true,
}}
>
<Tab.Screen
name="Explore"
component={Explore}
options={{
tabBarLabel: 'Explore'
}}
/>
<Tab.Screen
name="Bookings"
component={Bookings}
options={{
tabBarLabel: 'Bookings',
}}
/>
<Tab.Screen
name="Wardrobe"
component={WardrobeNavigator}
options={{
tabBarLabel: 'Wardrobe',
}}
/>
<Tab.Screen
name="Outfits"
component={OutfitNavigator}
options={{
tabBarLabel: 'Outfits',
}}
/>
<Tab.Screen
name="Chat"
component={Chat}
options={{
tabBarLabel: 'Chat',
}}
/>
</Tab.Navigator>
);
};

我想从LookBookList导航到Wardrobe，这是我在lookbook-list.js文件中所做的。

<HeaderBar
backButton
leftClick={() => navigation.goBack()}
rightIcon={<HangerIcon />}
rightIconClick={() => {
navigation.navigate('Wardrobe', {openModal: true});
}}
/>

我的衣柜.js文件：

export const Wardrobe = ({route}) => {
console.log('route.params', route.params) // <== this is undefined ???
const {openModal} = route.params;
const navigation = useNavigation();
const [isVisible, setIsVisible] = useState(openModal);

我收到以下错误：

TypeError: undefined is not an object (evaluating 'route.params.openModal')

Answer 1

通过查看您的代码，我认为问题在于您还可以从选项卡访问WardrobeNavigator，而不仅仅是从导航。由于您的初始屏幕Wardrobe在WardrobeNavigator中，并且由于您没有传递initialParams，因此在导航时设置参数之前，route.params.openModal进行评估。

为了防止它未定义并提供默认值，我们可以访问以下语法：

const openModal = route.params?.openModal ?? false; // So false is the default value here

https://reactnavigation.org/docs/upgrading-from-4.x/#no-more-getparam

更新

它不起作用的原因是因为您正在更新WardrobeNavigator的参数而不是Wardrobe。由于你想将参数传递到嵌套屏幕，你可以做这样的事情：

navigation.navigate('Wardrobe', {
screen: 'Wardrobe',
params: { openModal: true },
})

Answer 2

所以我使用 React 的ContextAPI 解决了这个问题。

在衣柜上下文中创建了一个上下文.js：

import React, {useState} from 'react';
export const WardrobeContext = React.createContext();
function WardrobeProvider(props) {
const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
return (
<WardrobeContext.Provider
value={{isAddItemModalOpen, setIsAddItemModalOpen}}>
{props.children}
</WardrobeContext.Provider>
);
}
export default WardrobeProvider;

在navigation.js文件中，用WardrobeProvider包装了我的根导航堆栈：

export const RootNavigator = () => {
return (
<WardrobeProvider> // <== wrapper context provider
<RootStack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName='Main'
mode='modal'>
<RootStack.Screen name="Main" component={BottomTabNavigator} />
<RootStack.Screen name="Brands" component={BrandStores} />
<RootStack.Screen name="ItemScreen" component={ItemScreen} />
<RootStack.Screen name="CreateLook" component={CreateLookNavigator} />
<RootStack.Screen name="ShoppingList" component={ShoppingList} />
<RootStack.Screen name="StylistInstructions" component={ProfileNavigator} />
{/* add full screen appear as modal */}
</RootStack.Navigator>
</WardrobeProvider>
);
}

最后，在衣柜.js：

import React, { useState, useEffect, useContext } from 'react';
import { useFocusEffect } from '@react-navigation/native';
import { WardrobeContext } from '../../../context/wardrobe-context';
export const Wardrobe = () => {
const {isAddItemModalOpen, setIsAddItemModalOpen} = useContext(WardrobeContext);
const [isVisible, setIsVisible] = useState(false);
useFocusEffect(
React.useCallback(() => {
setIsVisible(isAddItemModalOpen) // <== set value here to open modal
return () => setIsAddItemModalOpen(false); // <== clear/reset the value on navigation change
}, [isAddItemModalOpen])
);

useFocusEffect用于在Wardrobe.js屏幕聚焦时设置isVisible状态isAddItemModalOpen的值，当屏幕未聚焦时，上下文中的值设置为 false，换句话说，当用户导航到另一个屏幕时。

从外观簿列表导航到衣柜.js.js更新上下文值：

import {WardrobeContext} from '../../../context/wardrobe-context';
<HeaderBar
backButton
leftClick={() => navigation.goBack()}
rightIcon={<HangerIcon />}
rightClick={() => {
wardrobeContext.setIsAddItemModalOpen(true); // <== update context here
navigation.navigate('Wardrobe'); // <== and then navigate
}}
/>

欢迎提出改进建议。谢谢