React Native 尝试全局使用相同的数组

Question

我正在尝试学习 React Native，想知道是否有一种方法可以存储数组，比如在常量文件或其他文件中，并在不同的组件中重用它。例如，国家将是其中之一。我想为下拉选择组件创建一个状态数组（我使用的是react-native-element-dropdown），并在几个不同的组件中使用它。该数组将类似于：

const states = [
    { label: 'Alabama', value: 'AL' },
    { label: 'Alaska', value: 'AK' },
    { label: 'Arizona', value: 'AZ' },
    { label: 'Arkansas', value: 'AR' },
    { label: 'California', value: 'CA' },
    { label: 'Colorado', value: 'CO' },
    { label: 'Connecticut', value: 'CT' },
    { label: 'Delaware', value: 'DE' },
];

我什至不确定是否有办法做到这一点，但到目前为止我尝试过的所有操作都因太多渲染错误而出错。在开始复制和粘贴这些长数组之前我必须先问一下:-)

Answer 1

要实现您想要做的事情，您可以按照以下步骤操作：

创建一个常量文件来定义状态数组。

根据需要在组件中导入并使用数组。

第1步：创建常量文件

创建一个文件，例如constants.js，并在其中定义状态数组：

export const states = [
{ label: 'Alabama', value: 'AL' },
{ label: 'Alaska', value: 'AK' },
{ label: 'Arizona', value: 'AZ' },
{ label: 'Arkansas', value: 'AR' },
{ label: 'California', value: 'CA' },
{ label: 'Colorado', value: 'CO' },
{ label: 'Connecticut', value: 'CT' },
{ label: 'Delaware', value: 'DE' },
];

第 2 步：在组件中导入并使用数组。

现在，在任何需要使用该数组的组件中，只需导入并使用它即可：

import React from 'react';
import { View } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import { states } from './constants';  // Adjust the path according to your project structure

const MyComponent = () => {
    return (
        <View>
            <Dropdown
                data={states}
                labelField="label"
                valueField="value"
                placeholder="Select a state"
                // other necessary props
            />
        </View>
    );
};

export default MyComponent;