使用react原生中的react导航在选项卡视图中的两个屏幕之间共享数据(一个数组

npm install @react-navigation/native

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
    </Tab.Navigator>
  );
}

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';

function Screen1({ navigation }) {
  const [data, setData] = useState([]);

  const handleAddData = () => {
    const newData = [...data, 'New Data'];
    setData(newData);
    navigation.navigate('Screen2', { data: newData });
  };

  return (
    <View>
      <Text>Screen 1</Text>
      <Button title="Add Data" onPress={handleAddData} />
    </View>
  );
}

import React from 'react';
import { Text, View } from 'react-native';

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

  return (
    <View>
      <Text>Screen 2</Text>
      {data.map((item, index) => (
        <Text key={index}>{item}</Text>
      ))}
    </View>
  );
}