刷新控件不能与react本机中的底部选项卡导航器一起使用

import React, { useState } from 'react';
import { FlatList, RefreshControl } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyListScreen({ route }) {
  const [refreshing, setRefreshing] = useState(false);

  return (
    <FlatList
      key={route.key} // 使用路由的key作为列表的key
      data={...}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={() => { /* 刷新逻辑 */ }} />
      }
      ...
    />
  );
}

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="List1" component={MyListScreen} initialParams={{ key: 'list1' }} />
      <Tab.Screen name="List2" component={MyListScreen} initialParams={{ key: 'list2' }} />
    </Tab.Navigator>
  );
}

import React, { useState, useEffect } from 'react';
import { FlatList, RefreshControl } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyListScreen({ navigation }) {
  const [refreshing, setRefreshing] = useState(false);

  useEffect(() => {
    setRefreshing(false); // 切换选项卡时重置刷新状态
  }, [navigation]);

  return (
    <FlatList
      data={...}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={() => { /* 刷新逻辑 */ }} />
      }
      ...
    />
  );
}

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="List1" component={MyListScreen} />
      <Tab.Screen name="List2" component={MyListScreen} />
    </Tab.Navigator>
  );
}