反应本地选项卡导航错误：自动返回到访问的第一个底部tab

Question

如果我在“底部”选项卡1中的顶部选项卡中导航，然后尝试转到底部TAB2，几秒钟后，它将我带回了初始底部选项卡1，

这是我的依赖项： “依赖关系”：{ “@react-native-andAsync存储/异步存储”：“^1.17.3”， “@react-native-nivation-community/cli”：“^6.4.0”， “@react-navigation/tost-tabs”：“^6.3.1”， “@react-navigation/drawer”：“^6.4.1”， “@react-navigation/材料底部”：“^6.2.1”， “@react-navigation/材料 - top-tabs”：“^6.2.1”， “@react-navigation/本机”：“^6.0.10”， “@react-navigation/native-stack”：“^6.6.1”， “ Acciention-Collapse-Reactiant-native”：“^1.1.0”， “急转反应”：“^1.0.22”， “反应”：“^17.0.2”， “反应本”：“^0.68.2”， “反应 - 本地背景”：“^4.1.0”， “反应 - 本地 - 贝克环形”：“^4.7.1”， “ React-Native-bootsplash”：“^4.1.4”， “反应本机句柄”：“^2.4.1”， “反应新的app-review”：“^3.3.3”， “反应新线性级别”：“^2.5.6”，， “反应新模式”：“^13.0.1”， “ react-native-pager-view”：“^5.4.15”， “反应本地纸”：“^4.12.0”， “反应原状得到的”：“^2.6.0”， “反应态渲染html”：“^6.3.4”， “反应本地安全区域”：“^3.4.1”， “反应新屏幕”：“^3.13.1”， “ react-native-tab-view”：“^3.1.1”， “反应 - 媒介 - 元素”：“^9.1.0”， “ rn-fetch-blob”：“^0.10.13” }，

动画在这里 - ＆gt; http://tkdevolution.it/app-navigation-bug.gif.gif.gif

app.js ：

<NavigationContainer onReady={() => RNBootSplash.hide({ fade: true })}>
          <AllAppNavigation.Navigator initialRouteName={initialRouteName} screenOptions={{header: () => null}}>
            <AllAppNavigation.Screen name="IndexScreen" children={IndexDrawerNavigator} />
            <AllAppNavigation.Screen name="HomeScreen" children={StackNavigator} initialParams={{gidcom: String(GIdCom), gdatacom: String(GDataCom)}} />
          </AllAppNavigation.Navigator>
        </NavigationContainer>

stack导航器：

<Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="StackHome"
        component={BottomTabNavigator}
        initialParams={{screen:'TabHome', 
          // qui passiamo i parametri al bottom navigator perchè il context non è ancora caricato perchè è asincrono
          gidcom: idCom, 
          gdatacom: JSON.stringify(GDataCom)
        }}
        options={() => ({
          headerLeft: () => LogoComune(GDataCom),
          headerTitle: () => TitoloHeader(GDataCom),
          headerRight: () => DotsIcon(navigation)
        })}
      />
</Stack.Navigator>

标签导航器：

const MaterialTopNavigatorAvvisi = () => {
  return (
    <Tab2.Navigator>
      <Tab2.Screen name="InPrimoPiano" options={{tabBarLabel: 'In Primo Piano'}} component={AvvisiScreen} initialParams={{filtro: 'primopiano=true'}} />
      <Tab2.Screen name="Tutti" options={{tabBarLabel: 'Tutti'}} component={AvvisiScreen} initialParams={{filtro: ''}} />
    </Tab2.Navigator>
  );
}
const MaterialTopNavigatorEventi = () => {
  return (
    <Tab2.Navigator>
      <Tab2.Screen name="Oggi" options={{tabBarLabel: 'Oggi'}} component={EventiScreen} initialParams={{filtro: 'tipo=0'}} />
      <Tab2.Screen name="Futuri" options={{tabBarLabel: 'Futuri'}} component={EventiScreen} initialParams={{filtro: 'tipo=1'}} />
      <Tab2.Screen name="Principali" options={{tabBarLabel: 'Principali'}} component={EventiScreen} initialParams={{filtro: 'tipo=2'}} />
    </Tab2.Navigator>
  );
}

avvisiscreen：

const ItemView = ({item}, context) => {
    return (
      <ElementoLista item={item} colore={ColoreBase} destinazione='AvvisiDettaglio' />
      /* <Text>{item.Id + '. ' + item.Titolo}</Text> */
    );
  };

  useEffect(() => {
    fetch( BuildApiUrl("avvisi", idCom, null, filtro) )
      .then((response) => response.json())
      .then((json) => {setData(json)})
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  const wait = (timeout) => {
    return new Promise(resolve => setTimeout(resolve, timeout));
  }
  const [refreshing, setRefreshing] = React.useState(false);
  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);

  //occorre inserire un datafiltered come per la indexscreen, con questo filtro: (tipo=='0' && item.PrimoPiano=='true')
  //altrimenti utilizza il data originale, con tutti gli elementi non filtrati
  return (
    <SafeAreaView style={styles.center}>
      {isLoading ? <View style={[styles.container, styles.horizontal]}><ActivityIndicator size="large" /></View> : 
      ( <View style={styles.center}>
        {(data == '') ? <NoResultMsg/> : 
          (<FlatList
            data={data}
            keyExtractor={item => item.Id.toString()}
            renderItem={(item) => ItemView(item)}
            refreshControl={
              <RefreshControl
                refreshing={refreshing}
                onRefresh={onRefresh}
              />
            }
            /* ItemSeparatorComponent={ItemSeparatorView} */
            /* showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false} */
          />)}
        </View>
      )}
    </SafeAreaView>
  );
};

Answer 1

我有同样的问题，我找到了一个解决方案：

您只需要在导航器ScreenOptions中设置：unmountonblur：true

Answer 2

对于“顶部”选项卡修复程序，您需要做的就是添加AnimationEnabled：false，到screenoptions。这将解决您的问题