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

React Native中的导航库可以帮助我们在选项卡视图中的两个屏幕之间共享数据。在React Native中，常用的导航库有React Navigation和React Native Navigation。

使用React Navigation，我们可以通过以下步骤在选项卡视图中的两个屏幕之间共享数据：

首先，安装React Navigation库：

npm install @react-navigation/native

创建一个名为TabNavigator的选项卡导航器，并在其中定义两个屏幕：Screen1和Screen2。

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

在Screen1中定义一个数组，并将其传递给Screen2。

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

在Screen2中接收传递的数据，并显示在屏幕上。

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

通过以上步骤，我们可以在选项卡视图中的两个屏幕之间共享数据。当在Screen1中点击"Add Data"按钮时，会将新的数据添加到数组中，并通过导航将数据传递给Screen2，Screen2会显示传递过来的数据。

腾讯云相关产品和产品介绍链接地址：