Question

我有一个导航堆栈：

<ProfileStack.Navigator>
        <ProfileStack.Screen name="Search" component={SearchScreen} options={{ title: 'Discover'}} />
        <ProfileStack.Screen name="ProfileDetailScreen" component={ProfileDetailScreen} options={{ title: 'Profile Detail'}} />
        <ProfileStack.Screen name="Messages" component={MessagesScreen} options={{ title: 'Messages'}} />
        <MessageStack.Screen 
            name="Chat" 
            component={ChatScreen} 
            options={({ route }) => ({
                title: route.params.thread.username,
                headerRight: () => (
                    <Button
                        onPress={() => alert('ON PRESS SHOULD NAVIGATE TO ProfileDetailScreen')}
                        title="View Profile"
                        color="black"
                    />
                ),
            })} 
        />
    </ProfileStack.Navigator>

当我按下 headerRight Button 时：

onPress={() => alert('ON PRESS SHOULD NAVIGATE TO ProfileDetailScreen')}

我需要导航到：

<ProfileStack.Screen name="ProfileDetailScreen" component={ProfileDetailScreen} options={{ title: 'Profile Detail'}} />

当我按下 options={({ route }) 按钮时，我需要传递 ProfileDetailScreen 到 headerRight。

Answer 1

你需要做的就是获取导航道具并在你的 headerRight 中使用它：

<ProfileStack.Navigator>
        <ProfileStack.Screen name="Search" component={SearchScreen} options={{ title: 'Discover'}} />
        <ProfileStack.Screen name="ProfileDetailScreen" component={ProfileDetailScreen} options={{ title: 'Profile Detail'}} />
        <ProfileStack.Screen name="Messages" component={MessagesScreen} options={{ title: 'Messages'}} />
        <MessageStack.Screen 
            name="Chat" 
            component={ChatScreen} 
            options={({ navigation, route }) => ({
                title: route.params.thread.username,
                headerRight: () => (
                    <Button
                        onPress={() => navigation.navigate('ProfileDetailScreen')}
                        title="View Profile"
                        color="black"
                    />
                ),
            })} 
        />
    </ProfileStack.Navigator>

反应导航 - 导航到另一个屏幕

1 个答案: