React Native：如何从其他标签页的栈屏幕切换标签？

核心逻辑 #

借助React Navigation提供的navigation对象，调用navigate方法直接跳转到目标标签页，关键是要和底部标签页配置时的screen名称完全匹配。

具体实现步骤 #

1. 确认底部标签页配置

先确保你的底部标签页中，设置页的name字段（比如设为Settings）已正确定义，示例如下：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      {/* 此处的name需与跳转时的名称严格对应 */}
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

2. 首页组件添加跳转事件

在首页（HomeScreen）中，通过useNavigation钩子获取导航实例，给头像组件绑定点击事件：

import { View, TouchableOpacity, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View>
      {/* 点击头像触发跳转 */}
      <TouchableOpacity
        onPress={() => {
          navigation.navigate('Settings');
        }}
      >
        <Image
          source={{ uri: '用户头像地址' }}
          style={{ width: 50, height: 50, borderRadius: 25 }}
        />
      </TouchableOpacity>
    </View>
  );
}

export default HomeScreen;

3. 类组件适配方案

如果首页是类组件，直接通过props获取navigation对象即可：

import React from 'react';
import { View, TouchableOpacity, Image } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            this.props.navigation.navigate('Settings');
          }}
        >
          <Image
            source={{ uri: '用户头像地址' }}
            style={{ width: 50, height: 50, borderRadius: 25 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

export default HomeScreen;

注意事项 #

• 跳转时的名称必须和Tab.Screen中定义的name完全一致，区分大小写
• 如需传递参数，可在navigate方法中添加第二个参数，例如navigation.navigate('Settings', { userId: 123 })

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