如何在React-Native-Super-Grid上创建一个多选框

Question

我是React Native的新手，我一直在尝试在Flatlist上实现多选。我最近发现 react-native-super-grid 组件，我一直在尝试自定义它，以便能够进行多选，但到目前为止还没有成功。

我的方向是对的，还是有一个组件可以做网格和多选？

谢谢你，:'(

import React, { Component } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { FlatGrid } from 'react-native-super-grid'

export default class GridFlatlist extends Component {
    render() {
        const items = [
            { name: 'Pick n Pay', code: '#1abc9c' }, { name: 'EMERALD', code: '#2ecc71' },
            { name: 'PETER RIVER', code: '#3498db' }, { name: 'AMETHYST', code: '#9b59b6' },
            { name: 'WET ASPHALT', code: '#34495e' }, { name: 'GREEN SEA', code: '#16a085' },
            { name: 'NEPHRITIS', code: '#27ae60' }, { name: 'BELIZE HOLE', code: '#2980b9' },
            { name: 'WISTERIA', code: '#8e44ad' }, { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
            { name: 'SUN FLOWER', code: '#f1c40f' }, { name: 'CARROT', code: '#e67e22' },
            { name: 'ALIZARIN', code: '#e74c3c' }, { name: 'CLOUDS', code: '#ecf0f1' },
            { name: 'CONCRETE', code: '#95a5a6' }, { name: 'ORANGE', code: '#f39c12' },
            { name: 'PUMPKIN', code: '#d35400' }, { name: 'POMEGRANATE', code: '#c0392b' },
            { name: 'SILVER', code: '#bdc3c7' },
        ];
        return (
            <FlatGrid
                itemDimension={110}
                items={items}
                style={styles.gridView}
                renderItem={({ item, index }) => (
                    <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
                        <Text style={styles.itemName}>{item.name}</Text>
                        <Text style={styles.itemCode}>{item.code}</Text>
                    </View>
                )} />
        )
    }
}

const styles = StyleSheet.create({
    gridView: {
        marginTop: 20,
        flex: 1,
    },
    itemContainer: {
        justifyContent: 'flex-end',
        padding: 10,
        height: 110,
    },
    itemName: {
        fontSize: 16,
        color: '#fff',
        fontWeight: '600',
    },
    itemCode: {
        fontWeight: '600',
        fontSize: 12,
        color: '#fff',
    },
})

Answer 1

你可以使用一个flatlist来创建一个多选择非常简单。唯一的事情是反应原生没有一个复选框，在Android和IOS的工作。下面的例子是为Android和你可以使用的 反应式本地元素的复选框 来支持两个平台。

下面是解决方案的代码。

const CheckList = props => {
 const [data, setData] = useState([]);

  useEffect(() => {
    setData(props.data);
  }, []);

  const OnCheckChange = id => {
    const arr = [...data];
    const item = arr.find(item => item.id === id);
    item.isChecked = !item.isChecked;
    setData(arr);
    // can use a callback to update parent from here
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => {
        return (
          <View style={{ flexDirection: "row" }}>
            <CheckBox
              value={item.isChecked}
              onValueChange={() => OnCheckChange(item.id)}
            />
            <Text>{item.name}</Text>
          </View>
        );
      }}
    />
  );
};

const items = [
  { id: 1, name: "Pick n Pay", code: "#1abc9c" },
  { id: 2, name: "EMERALD", code: "#2ecc71" },
  { id: 3, name: "PETER RIVER", code: "#3498db" },
  { id: 4, name: "AMETHYST", code: "#9b59b6" },
  { id: 5, name: "WET ASPHALT", code: "#34495e" },
  { id: 6, name: "GREEN SEA", code: "#16a085" },
  { id: 7, name: "NEPHRITIS", code: "#27ae60" },
  { id: 8, name: "BELIZE HOLE", code: "#2980b9" }
];

class App extends Component {
  render() {
    return (
      <View style={styles.app}>
        <CheckList data={items} />
        <Button onPress={() => {}} title="Example button" />
      </View>
    );
  }
}