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

我的衣柜.js文件：

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

export const=（{route}）=>{
console.log（'route.params'，route.params）通过查看您的代码，我认为问题在于您也可以从选项卡而不仅仅是导航中访问
WardrobeNavigator
。由于您的初始屏幕是
WardrobeNavigator
中的
Coader
，并且由于您没有传递
initialParams
，因此，
route.params.openModal
会得到评估d，然后在导航上设置参数

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

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);


更新

它不起作用的原因是因为您正在更新
衣柜导航器
的参数，而不是
衣柜
。由于要将参数传递到嵌套屏幕，您可以执行以下操作：

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

通过查看您的代码，我认为问题在于，您也可以从选项卡中而不仅仅是从导航中访问
WardrobeNavigator
。由于您的初始屏幕是
WardrobeNavigator
中的
衣柜
，并且由于您没有传递
initialParams
，
route.params.openModal
将被计算为在导航上设置参数之前

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

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);


更新

它不起作用的原因是因为您正在更新
衣柜导航器
的参数，而不是
衣柜
。由于要将参数传递到嵌套屏幕，您可以执行以下操作：

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

因此，我使用React的
Context
API解决了这个问题

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

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

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中：

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

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>
    );
}

欢迎提出改进建议。谢谢，我已经使用React的
上下文
API解决了这个问题

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

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

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中：

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

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>
    );
}

欢迎提出改进建议。谢谢
我尝试了
initialParams
，我现在可以看到route.params.openModal，但是当我使用
navigation.navigate从LookbookList组件导航时（'campor'，{openModal:true}）
屏幕改变，但值没有改变，仍然是
false
；感谢这项工作，但我的模式没有打开，因为openModal作为初始状态传递给setState，所以我不得不再次设置状态，实际上是传递openModal参数。然后下一个问题是进一步导航路线参数没有清除或重置，w这再次需要useEffect来完成。我已经求助于react的上下文api来处理它。我将用我的实现回答更多细节。非常感谢您的帮助。我尝试了
initialParams
，现在我可以看到route.params.openModal，但是当我使用
导航从LookbookList组件导航时。导航（'caverage'），{openModal:true}）
屏幕改变，但值没有改变，仍然是
false
；感谢这项工作，但我的模式没有打开，因为openModal作为初始状态传递给setState，所以我不得不再次设置状态，实际上是传递openModal参数。然后下一个问题是进一步导航路线参数没有清除或重置，w这再次要求useEffect这样做。我已经求助于react的上下文api来处理它。我将用我的实现回答更多细节。非常感谢您的帮助。