从另一个菜单返回时如何选择 React Native 顶部导航栏中的第一个选项卡

Question

import React, { Component,useEffect } from 'react';
import 'react-native-gesture-handler';
import { SafeAreaView,StackLayout,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';

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

 

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


function Terpopuler (){

  return(
    <View>
      <Text> Terpopuler </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} />
            ),
          }}/> 
       
  
    )
  }


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>
    )
  }
}

当我运行应用程序并进入另一个页面并返回主页时，顶部选项卡导航不会返回到第一个选项卡，而是保留在所选选项卡上......我使用react-native而不是expo

当我运行应用程序并进入另一个页面并返回主页时，顶部选项卡导航不会返回到第一个选项卡，而是保留在所选选项卡上......我使用react-native而不是expo

Answer 1

重置顶部选项卡选择的一种方法是聆听 tabPress 并导航到第一个选项卡。像这样的东西：

const Tab = createMaterialTopTabNavigator();

function TopTabs({ navigation }) {
  useEffect(() => {
    const unsubscribe = navigation.addListener('tabPress', (e) => {
      e.preventDefault();
      navigation.navigate('Home');
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={...} />
      <Tab.Screen name="Settings" component={...} />
    </Tab.Navigator>
  );
}

const BottomTab = createBottomTabNavigator();

function BottomTabs() {
  return (
    <BottomTab.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <BottomTab.Screen name="Tab1" component={TopTabs} />
      <BottomTab.Screen name="Tab2" component={...} />
    </BottomTab.Navigator>
  );
}