Как создать множественный выбор в React-Native-Super-Grid - PullRequest
Новая
       15

Как создать множественный выбор в React-Native-Super-Grid

0 голосов
/ 06 мая 2020

Я новичок в 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',
    },
})

1 Ответ

0 голосов
/ 06 мая 2020

Вы можете использовать плоский список для очень простого создания множественного выбора. Единственное, что у React Native нет флажка, который работает как в 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>
    );
  }
}
...