on Нажмите для навигации по экрану без навигации

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