從 React Native 中的另一個文件導入大型數據集

Question

我是 React Native 的初學者，我正在嘗試用大約 150 個名稱填充 DropDownPicker。

到目前為止，我只有 3 個，但當我添加 150 個時，它會變得很大。 我想從另一個文件中導出項目列表並將其直接導入 DropDownPicker。

我聽說你需要先 map 但我不知道該怎么做。

                        items={[
                            {
                                label: "UK",
                                value: "uk",
                                key: "1",
                            },
                            {
                                label: "France",
                                value: "france",
                                key: "2",
                            },
                            {
                                label: "Germany",
                                value: "germany",
                                key: "3",
                            },

                        ]}

import React, { Component } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import DropDownPicker from "react-native-dropdown-picker";

export default class DropDown extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.textContainer}>
                    <Text style={styles.text1}>Chosen country: </Text>
                    <Text style={styles.text2}>{this.state.data}</Text>
                </View>
                <View style={styles.dropContainer}>
                    <DropDownPicker
                        searchable={true}
                        searchablePlaceholder="Search"
                        searchablePlaceholderTextColor="gray"
                        seachableStyle={{}}
                        searchableError={() => <Text>Not found</Text>}
                        items={[
                            {
                                label: "UK",
                                value: "uk",
                                key: "1",
                            },
                            {
                                label: "France",
                                value: "france",
                                key: "2",
                            },
                            {
                                label: "Germany",
                                value: "germany",
                                key: "3",
                            },

                        ]}
                        defaultValue={this.state.data}
                        placeholder="Choose a country"
                        containerStyle={{ width: 200, height: "30%" }}
                        style={{ backgroundColor: "#fafafa" }}
                        itemStyle={{
                            justifyContent: "center",
                        }}
                        labelStyle={{
                            fontSize: 16,
                            textAlign: "left",
                            color: "#000",
                        }}
                        dropDownStyle={{ backgroundColor: "#fafafa" }}
                        onChangeItem={(item) =>
                            this.setState({
                                data: item.value,
                            })
                        }
                    />
                </View>
                <View style={styles.butContainer}>
                    <View style={styles.button}>
                        <TouchableOpacity>
                        <Text style={styles.butText}> Halda áfram</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}

Answer 1

這樣做沒有什么辦法：

export const countries = [
     {
         id: 1,
         label: 'UK',
         value: 'uk'
     },
     // ..countries
];

// ...imports
import { countries } from 'pathToYourData';

export default class DropDown extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            // ...
            <DropDownPicker
                // ..otherProps
                items={countries}
            />

        );
    }
}

Answer 2

假設您創建了一個包含所有 150 個國家/地區的名為 data.json 的文件：

數據.json

[
     {
          label: "FR",
          value: "fr",
          key: "1"
     },
     ...
]

您可以簡單地導入它並像這樣使用它：

import React, { Component } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
import myData from "data.json";

export default class DropDown extends Component {
    ...    
    render() {
        return (
            <DropDownPicker
                ...
                items={myData}
                ...
            />
        );
    }
}

不需要 map 什么的，直接導入即可！