[英]i try to import a array data in JS file from another js file in react native , and i try to check the length of the array in react native
[英]Import a large data set from another file in React Native
我是 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>
);
}
}
这样做没有什么办法:
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}
/>
);
}
}
假设您创建了一个包含所有 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 什么的,直接导入即可!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.