React Native返回首页时如何自动选中顶部导航首个Tab

问题描述 #

使用React Native（非Expo）开发应用，实现了底部Tab嵌套顶部Material Tab的导航结构，但进入其他页面后返回首页时，顶部Tab导航会保留之前选中的状态，不会自动切换至首个“Berita Terkini”Tab。

现有代码 #

import React, { Component, useEffect } from 'react';
import 'react-native-gesture-handler';
import { SafeAreaView, Button, TouchableOpacity, Image, Text, View, StyleSheet, Dimensions } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { useIsFocused, NavigationContainer } from '@react-navigation/native';
// 补充缺失的Icon组件导入（根据实际使用的图标库调整）
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();
const TopTabsGroup = createMaterialTopTabNavigator();

function BeritaTerkini() {
  return (
    <View>
      <Text> Berita Terkini </Text>
    </View>
  )
}

function Terpopuler() {
  return (
    <View>
      <Text> Terpopuler </Text>
    </View>
  )
}

// 补充原代码中未定义的Topik组件
function Topik() {
  return (
    <View>
      <Text> Topik </Text>
    </View>
  )
}

function TopTabroup(props) {
  const { initialRouteName } = props;

  return (
    <TopTabsGroup.Navigator initialRouteName="Berita Terkini">
      <TopTabsGroup.Screen name='Berita Terkini' component={BeritaTerkini} />
      <TopTabsGroup.Screen name='Terpopuler' component={Terpopuler} />
    </TopTabsGroup.Navigator>
  )
}

function TabGroup() {
  return (
    <Tab.Navigator screenOptions={{
      headerShown: false,
      tabBarActiveTintColor: 'red',
      tabBarInactiveTintColor: 'black',
    }}>
      <Tab.Screen name='Berita Terkini' component={TopTabroup}
        options={{
          tabBarLabel: 'BERITA TERKINI',
          tabBarIcon: ({ color, size }) => (
            <Icon name="home" color={color} size={20} />
          ),
        }}
      />
      <Tab.Screen name='Topik' component={Topik}
        options={{
          tabBarLabel: 'TOPIK',
          tabBarIcon: ({ color, size }) => (
            <Icon name="microphone" color={color} size={20} />
          ),
        }} />
    </Tab.Navigator>
  )
}

export default class Home extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.Header}>
          <Image style={styles.logo} source={require('../assets/logo.png')} />
        </View>
        <TabGroup />
      </View>
    )
  }
}

// 补充原代码缺失的样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  Header: {
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  logo: {
    width: 100,
    height: 40,
    resizeMode: 'contain',
  }
});

解决方案 #

核心逻辑是监听顶部Tab所在页面的焦点状态，当页面重新获得焦点时，强制重置导航到第一个Tab页面，具体实现如下：

修改TopTabroup组件 #

引入useIsFocused和useNavigation钩子，添加焦点监听逻辑：

import { useIsFocused, useNavigation, CommonActions } from '@react-navigation/native';

function TopTabroup(props) {
  const isFocused = useIsFocused();
  const navigation = useNavigation();

  useEffect(() => {
    // 当页面获得焦点时，重置顶部Tab到初始页面
    if (isFocused) {
      navigation.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{ name: 'Berita Terkini' }],
        })
      );
    }
  }, [isFocused, navigation]);

  return (
    <TopTabsGroup.Navigator initialRouteName="Berita Terkini">
      <TopTabsGroup.Screen name='Berita Terkini' component={BeritaTerkini} />
      <TopTabsGroup.Screen name='Terpopuler' component={Terpopuler} />
    </TopTabsGroup.Navigator>
  )
}

原理说明 #

• useIsFocused：实时监听当前页面是否处于焦点状态，当从其他页面返回首页时，该值会切换为true
• CommonActions.reset：通过导航动作重置顶部Tab的路由栈，直接将当前页面切换到指定的初始Tab，彻底清除之前的选中状态

注意事项 #

1. 确保已正确安装并导入@react-navigation/native相关依赖
2. 如果使用的是旧版本React Navigation，可直接使用navigation.reset()替代CommonActions.reset，功能一致
3. 若底部Tab的首页是通过栈导航跳转出去的，需确保返回时首页能正确触发焦点监听

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