如何在React Native Tab Navigator中程序化切换标签页？

原示例代码 #

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

代码实现标签页跳转 #

要实现从Home标签页跳转到Settings标签页，只需利用React Navigation内置的navigation对象，步骤如下：

1. 获取navigation props：所有通过Tab.Screen注册的组件会自动接收navigation属性，直接在组件参数中解构即可。
2. 调用跳转方法：使用navigation.navigate('目标页name')触发跳转，其中name对应你在Tab.Screen中设置的页面名称。

修改后的完整代码

import * as React from 'react';
// 新增Button组件导入
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// 解构获取navigation对象
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
      {/* 添加跳转按钮，点击触发跳转 */}
      <Button
        title="跳转到设置页"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

额外说明 #

• 如果需要强制跳转（即使当前已处于目标页面，避免重复入栈），可以使用navigation.replace('Settings')替代navigate。
• 跳转逻辑不仅限于按钮点击，也可以放在其他触发事件中（比如接口请求完成后、定时器触发后）。

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