尝试在React Native中做出多项选择列表时出现错误

时间:2018-07-23 15:03:43

标签: android ios reactjs react-native

我正在尝试在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'
    }
});

0 个答案:

没有答案