React Native如何导出数组以在多个组件中复用？

嗨，完全不用抱歉！这是React Native新手入门时非常高频的需求，解决起来其实很简单，我给你一步步讲清楚：

第一步：创建单独的文件存放并导出数组 #

首先，你可以在项目里新建一个专门用来存放共享数据的文件，比如叫sharedData.js（名字随便取，只要见名知意就行，比如appConstants.js、productList.js都可以）。

在这个文件里定义你的数组，然后用ES6的导出语法把它暴露出去，有两种常用方式：

方式1：命名导出 #

适合你需要导出多个变量/数组的场景：

// sharedData.js
export const mySharedArray = [
  "苹果",
  "香蕉",
  "橙子",
  { name: "猕猴桃", price: 5 }
];

// 如果还有其他共享数据，也可以一起导出
export const anotherArray = [1, 2, 3, 4];

方式2：默认导出 #

适合这个文件主要就是为了导出这一个数组的场景：

// sharedData.js
const mySharedArray = [
  "苹果",
  "香蕉",
  "橙子",
  { name: "猕猴桃", price: 5 }
];

export default mySharedArray;

第二步：在组件中导入并使用 #

接下来在你需要用这个数组的组件里，根据导出方式选择对应的导入语法：

对应命名导出的导入 #

// 比如在HomeScreen.js里
import { mySharedArray } from './sharedData'; // 注意这里的路径要和你的文件实际位置匹配

// 然后就可以直接用了，比如渲染到FlatList里
function HomeScreen() {
  return (
    <FlatList
      data={mySharedArray}
      renderItem={({ item }) => (
        <Text>{typeof item === 'string' ? item : item.name}</Text>
      )}
      keyExtractor={(item, index) => index.toString()}
    />
  );
}

对应默认导出的导入 #

默认导出的话，导入时可以自定义名字，不用和原文件里的变量名一致：

// 比如在ProfileScreen.js里
import fruitList from './sharedData'; // 这里的fruitList是你自己取的名字

// 使用示例
function ProfileScreen() {
  return (
    <View>
      {fruitList.map((item, index) => (
        <Text key={index}>{item}</Text>
      ))}
    </View>
  );
}

小提示 #

• 注意文件路径：如果sharedData.js和组件文件在同一个文件夹下，用./sharedData；如果在上一级文件夹，用../sharedData，以此类推。
• 如果你的数组是动态变化的（比如需要在多个组件里修改并同步状态），那这种静态导出的方式就不够了，这时候可以考虑用React Context或者Redux这类状态管理工具，但静态导出对于固定不变的数组已经完全够用啦！

内容的提问来源于stack exchange，提问作者chubbychu