开发者问题收集

onPress 在未导航的屏幕上导航

2020-07-10
837

我是 React Native 的新手,我想在按下 Navigator 屏幕上的 Button 时在屏幕上导航,但它不起作用。

因为当我按下 TabOneStack.Screen 中的 Button 时什么都没有发生,我不明白,我想导航到 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 中的按钮时什么都没有发生?

提前谢谢您

1个回答

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

options={({ navigation }) => ({
                    headerTitle: 'Rejoindre', headerRight: props => (
                        <Button onPress={() => props.navigation.navigate('TabTwoScreen')}
Raghvender Kataria
2020-07-10