我正在尝试在react native中创建一个选择列表。我在使用复选框时遇到了麻烦,因此我找到了一个用于多选列表的库。我将传递JSON列表中的值。如果有人知道如何制作带有复选框的平面列表,那么这也会有所帮助。我收到此错误:
这是我的代码:
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
TouchableHighlight,
FlatList,
CheckBox
} from "react-native";
import { Icon } from 'native-base'
import MultipleChoice from 'react-native-multiple-choice'
class LikesTab extends Component {
state = {
checked: false,
}
press = () => {
this.setState((state) => ({
checked: !state.checked,
}));
}
//SETTING THE STATE MAKING AN EMPTY ARRAY WHICH WE FIL
state = {
data: []
};
componentWillMount() {
this.fetchData();
}
//Getting the data
fetchData = async () => {
const response = await fetch("https://api.myjson.com/bins/s5iii");
const json = await response.json();
this.setState({ data: json.results });
};
//var customData = require('./customData.json');
//Setting what is shown
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i}
renderItem={({ item }) =>
<Text>
{`${item.name.first} ${item.name.last}`}
</Text>}
/>
<MultipleChoice
options={[
'Lorem ipsum dolor sit',
'Lorem ipsum',
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
'Lorem ipsum dolor sit amet, consetetur',
'Lorem ipsum dolor'
]}
selectedOptions={['Lorem ipsum']}
maxSelectedOptions={2}
onSelection={(option)=>alert(option + ' was selected!')}
/>
</View>
);
}
}
export default LikesTab;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});