React Navigation5.x:在材料顶部选项卡之间共享来自单个API调用的数据

npm install @react-navigation/native
npm install @react-navigation/stack

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

// 导入其他组件和屏幕

const Tab = createMaterialTopTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        {/* 在这里定义选项卡 */}
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

<Tab.Navigator>
  <Tab.Screen
    name="Screen1"
    component={Screen1}
    initialParams={{ data: 'Shared data' }}
    options={{ tabBarLabel: 'Tab 1' }}
  />
  <Tab.Screen
    name="Screen2"
    component={Screen2}
    initialParams={{ data: 'Shared data' }}
    options={{ tabBarLabel: 'Tab 2' }}
  />
</Tab.Navigator>

function Screen1({ route }) {
  const { data } = route.params;

  return (
    <View>
      <Text>{data}</Text>
    </View>
  );
}

function Screen2({ route }) {
  const { data } = route.params;

  return (
    <View>
      <Text>{data}</Text>
    </View>
  );
}