react-native - onPress 在不导航的屏幕上导航

Question

我是 React Native 的初学者，当我按下屏幕的 时，我想在屏幕上导航，Button但Navigator它不起作用。

因为当我按下没有发生我不明白Button的事情时TabOneStack.Screen，我想导航到TabTwoScreen. 我使用 React Navigation 5.6.1。

    const BottomTab = createBottomTabNavigator<BottomTabParamList>();
    export default function BottomTabNavigator() {
        return (
            <BottomTab.Navigator 
                initialRouteName="TabOne">
                <BottomTab.Screen
                    name="TabOne"
                    component={TabOneNavigator}
                />
            <BottomTab.Screen
                name="TabTwo"
                component={TabTwoNavigator}
                options={{
                    tabBarLabel: 'Autour de moi',
                    tabBarIcon: ({ color }) => <TabBarIcon name="ios-navigate" color={color} />,
                }}
            />
            </BottomTab.Navigator>
        );
    }
    
    const TabOneStack = createStackNavigator<TabOneParamList>();
    function TabOneNavigator() {
    return (
        <TabOneStack.Navigator>
            <TabOneStack.Screen
                name="TabOneScreen"
                component={TabOneScreen}
                options={({ navigation }) => ({
                    headerTitle: 'Rejoindre', headerRight: () => (
                        <Button onPress={() => navigation.navigate('TabTwoScreen')}
                            icon={
                                <Icon
                                    name='ios-log-in'
                                    type='ionicon'
                                    size={15}
                                    color="white"
                                />
                            }
                        />
                    ),
                })}
            />
        </TabOneStack.Navigator>
        );
    }

const TabTwoStack = createStackNavigator<TabTwoParamList>();

function TabTwoNavigator() {
    return (
        <TabTwoStack.Navigator>
            <TabTwoStack.Screen
                name="TabTwoScreen"
                component={TabTwoScreen}
                options={{ headerTitle: 'Autour de moi' }}
            />
        </TabTwoStack.Navigator>
    );
}

为什么当我按下按钮时TabOneStack.Screen什么都没有发生？

先感谢您

Answer 1

您需要使用道具进行导航，您可以试试这个

options={({ navigation }) => ({
                    headerTitle: 'Rejoindre', headerRight: props => (
                        <Button onPress={() => props.navigation.navigate('TabTwoScreen')}