React Native中如何在Bottom Tabs Navigator中使用onPress()？

问题描述 #

我在应用中使用Bottom Tabs Navigator进行页面导航，目前遇到的问题是：在欢迎页面添加了两个非底部标签栏的按钮，希望通过各自的onPress()函数跳转到Home页面和Instructions页面。原本以为可以通过navigation prop进行导航，但并未生效。底部标签栏本身运行正常，不清楚如何将按钮的导航配置与现有标签栏整合，请问仅使用Bottom Tabs Navigation能否实现该功能，还是需要创建Stack Navigator？

相关代码 #

GetStartedButton组件

const GetStartedButton = ({navigation}) => {    
  return (
    <View>
      <Pressable
        style={style.buttonContainer}
        onPress={() => navigation.navigate('Home')}>
        <Text>
          Get Started
        </Text>
      </Pressable>
    </View>
  );
};

export default GetStartedButton;

Tab Navigation配置

const Tab = createBottomTabNavigator();
const MainNavigation = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={Welcome}
        options={{
          headerShown: false,
          tabBarIcon: ({size, color}) => <HouseIcon />,
          tabBarInactiveBackgroundColor: '#F1F5F8',
        }}
      />
    </Tab.Navigator>
  );
};

export default MainNavigation;

Welcome页面（按钮所在页面）

import {View, Text} from 'react-native';
import React from 'react';
import GetStartedButton from './GetStartedButton';
import Background from '../../components/Backgrounds/Background';
import lightGlobalStyles from '../../assets/globalStyles/lightGlobalStyles';
import themes from '../../assets/globalStyles/themes';
import {useTheme} from '../../ThemeContext';

import style from './style';
import HowToUse from './HowToUse';

const Welcome = () => {
  const theme = useTheme();
  return (
    <View style={lightGlobalStyles.affirmationContainer}>
      <View style={style.pressablesContainer}>
        <HowToUse />
        <GetStartedButton />
      </View>
      <Background />
    </View>
  );
};

export default Welcome;

解决方案 #

核心问题分析 #

你的代码存在两个关键问题导致导航失效：

• 未将navigation prop传递给按钮组件
• Tab Navigator的页面注册逻辑错误（把Welcome页面当成了Home标签页）

分步修正 #

1. 传递navigation prop给按钮组件

Welcome组件作为Tab.Screen的内容，会自动接收navigation prop，但你在渲染<GetStartedButton />时没有把它传进去，导致按钮里的navigation为undefined。修改Welcome页面：

import {View, Text} from 'react-native';
import React from 'react';
import GetStartedButton from './GetStartedButton';
import Background from '../../components/Backgrounds/Background';
import lightGlobalStyles from '../../assets/globalStyles/lightGlobalStyles';
import themes from '../../assets/globalStyles/themes';
import {useTheme} from '../../ThemeContext';

import style from './style';
import HowToUse from './HowToUse';

// 直接从props接收navigation
const Welcome = ({navigation}) => {
  const theme = useTheme();
  return (
    <View style={lightGlobalStyles.affirmationContainer}>
      <View style={style.pressablesContainer}>
        <HowToUse />
        {/* 传入navigation prop */}
        <GetStartedButton navigation={navigation} />
      </View>
      <Background />
    </View>
  );
};

export default Welcome;

或者也可以用useNavigation钩子获取导航对象：

import {View, Text, useNavigation} from 'react-native';

const Welcome = () => {
  const navigation = useNavigation(); // 通过钩子获取
  const theme = useTheme();
  return (
    <View style={lightGlobalStyles.affirmationContainer}>
      <View style={style.pressablesContainer}>
        <HowToUse />
        <GetStartedButton navigation={navigation} />
      </View>
      <Background />
    </View>
  );
};

2. 正确注册Tab Navigator的页面

你当前的Tab.Navigator里把Welcome页面注册成了"Home"标签页，这逻辑错误。需要把真正的Home、Instructions页面注册到Tab导航中：

const Tab = createBottomTabNavigator();
const MainNavigation = () => {
  return (
    <Tab.Navigator>
      {/* 注册真正的Home组件 */}
      <Tab.Screen
        name="Home"
        component={Home} 
        options={{
          headerShown: false,
          tabBarIcon: ({size, color}) => <HouseIcon />,
          tabBarInactiveBackgroundColor: '#F1F5F8',
        }}
      />
      {/* 注册Instructions页面 */}
      <Tab.Screen
        name="Instructions"
        component={Instructions}
        options={{
          headerShown: false,
          // 配置对应的标签栏图标等
        }}
      />
    </Tab.Navigator>
  );
};

export default MainNavigation;

3. 场景选择：是否需要Stack Navigator

• 如果Welcome是底部标签栏内的某个页面：仅用Bottom Tabs Navigator即可，完成上述两步修正后，按钮就能正常导航到Home/Instructions标签页。
• 如果Welcome是独立的启动页（不属于底部标签栏）：需要用Stack Navigator包裹Welcome和MainNavigation，实现跨栈导航：

import {createStackNavigator} from '@react-navigation/stack';
const Stack = createStackNavigator();

const RootNavigation = () => {
  return (
    <Stack.Navigator initialRouteName="Welcome">
      <Stack.Screen
        name="Welcome"
        component={Welcome}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Main"
        component={MainNavigation}
        options={{headerShown: false}}
      />
    </Stack.Navigator>
  );
};

此时Welcome页面的按钮可以这样导航：

// 跳转到Tab导航的Home页面
onPress={() => navigation.navigate('Main', { screen: 'Home' })}
// 跳转到Tab导航的Instructions页面
onPress={() => navigation.navigate('Main', { screen: 'Instructions' })}

内容的提问来源于stack exchange，提问作者Tony