如何使用带有 FlatList React Native 的 react-native-element 复选框从 json 中获取复选框？

Question

我正在尝试使用从 json 获取的名称创建动态复选框，this issue 看起来与我需要的相同，但如果没有代码解释，我无法实现我的目标，

我有一个这样的 json 示例：

this.state = {
  data : [
  {
    "name": "ALL",
  },
  {
    "name": "Android",
  },
  {
    "name": "iOS",
  },
  {
    "name": "React Native",
  }
]}

下面的代码：

<CheckBox
  center
  title={this.state.data[1].name}
  onPress={() => {this.setState({checked: !this.state.checked})}}
  checked={this.state.checked}
/>

复选框运行良好，但仅显示 json 的第二个值

我的目标是将所有 json 值显示到 flatlist 中并使复选框运行良好，

现在我只能将这些 json 显示到 FlatList 中，但复选框不起作用

import React, { Component } from 'react';
import {
  Text, View, StyleSheet, Alert, FlatList
} from 'react-native';
import Dimensions from 'Dimensions';
import { CheckBox } from 'react-native-elements'

const DeviceWidth = Dimensions.get('window').width;
const DeviceHeight = Dimensions.get('window').height;

class MedicalClearlance extends React.Component {

  constructor(props){
    super(props); 
    this.state = {
      checked:[],
      data : [
      {
        "name": "ALL",
      },
      {
        "name": "Android",
      },
      {
        "name": "iOS",
      },
      {
        "name": "React Native",
      }
    ]}
  }

  render() {
    return (
      <FlatList
        data={ this.state.data }
        renderItem={({item, index}) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => {this.setState({checked: !this.state.checked}), console.log(this.state.checked +' '+ index)}}
          checked={this.state.checked}/>
        }
      />
    );
  }
}

谁能帮我实现我的目标？

Answer 1

您需要填充checked 数组以便之后对其进行操作。

constructor() {
  super();
  this.state = {
    data: [
      {
        "name": "ALL",
      },
      {
        "name": "Android",
      },
      {
        "name": "iOS",
      },
      {
        "name": "React Native",
      }
    ],
    checked: []
  }
}

componentWillMount() {
  let { data, checked } = this.state;
  let intialCheck = data.map(x => false);
  this.setState({ checked: intialCheck })
}

并传递所选复选框的index 以更新它

handleChange = (index) => {
  let checked = [...this.state.checked];
  checked[index] = !checked[index];
  this.setState({ checked });
}

render() {
  let { data, checked } = this.state;
  return (
    <FlatList
      data={data}
      renderItem={({ item, index }) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => this.handleChange(index)}
          checked={checked[index]} />
      }
    />
  );
}

希望对你有帮助！

Answer 2

Ahsan Ali 提供的答案将起作用。 但是它缺少了非常重要的一行代码。

• 在<FlatList/> 组件中，请务必添加此extraData ={this.state}。这将允许 FlatList 组件在状态更改时重新呈现。

渲染方法将如下所示：

handleChange = (index) => {
  let checked = [...this.state.checked];
  checked[index] = !checked[index];
  this.setState({ checked });
}

render() {
  let { data, checked } = this.state;
  return (
    <FlatList
      data={data}
      extraData={this.state}
      renderItem={({ item, index }) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => this.handleChange(index)}
          checked={checked[index]} />
      }
    />
  );
}

通过将 extraData={this.state} 传递给 FlatList，我们可以确保 FlatList 当 state.selected 改变时，它本身会重新渲染。无需设置 这个道具，FlatList 不会知道它需要重新渲染任何项目 因为它也是一个 PureComponent 并且 prop 比较不会 显示任何更改。

更多信息可以在 React-Native Flat-List 文档here找到。

---

如果您使用来自Ahsun Ali's 帖子的代码，您可能会遇到另一个错误。

• 警告错误显示componentWillMount() 方法是 已弃用。在这种情况下，请务必使用componentDidMount() 而是。

希望这对人们有所帮助！

Answer 3

你可以试试这个多选，参考链接-> https://facebook.github.io/react-native/docs/flatlist

class MyListItem extends React.PureComponent 
{
 _onPress = () => {
 this.props.onPressItem(this.props.id);
 };
 render() {
const textColor = this.props.selected ? 'red' : 'black';
return (
  <TouchableOpacity onPress={this._onPress}>
    <View>
      <Text style={{color: textColor}}>{this.props.title}</Text>
    </View>
  </TouchableOpacity>
   );
   }
   }
   class MultiSelectList extends React.PureComponent {
   state = {selected: (new Map(): Map<string, boolean>)};

   _keyExtractor = (item, index) => item.id;

    _onPressItem = (id: string) => {
    // updater functions are preferred for transactional updates
     this.setState((state) => {
     // copy the map rather than modifying state.
     const selected = new Map(state.selected);
     selected.set(id, !selected.get(id)); // toggle
     return {selected};
      });
      };
     _renderItem = ({item}) => (
      <MyListItem
     id={item.id}
     onPressItem={this._onPressItem}
     selected={!!this.state.selected.get(item.id)}
     title={item.title}
     />
     );
     render() {
     return (
     <FlatList
     data={this.props.data}
     extraData={this.state}
     keyExtractor={this._keyExtractor}
     renderItem={this._renderItem}
     />
      );
      }
      }
     for(const ele of  this.state.selected.keys())
      console.log(ele);
      //**after that you could get all the selected keys or values from something like this**