Flatlist 多项选择不适用于 React Native

Question

我正在创建一个多 select 网格平面列表，它似乎在 IOS phone 中工作正常，但在 Android phone。在 IOS 上，它可以 select 单击一个项目，但在 Android 上，当您 select/click 一个项目时它只会闪烁。

我真的，真的想不通。请帮忙。

谢谢，

[Flatlist-Grid 根据代码][1]

import {
    View, TouchableOpacity, StyleSheet, Text, ScrollView,
    Image,
} from 'react-native'
import { MaterialIcons } from '@expo/vector-icons';

export default class StoreSelector extends Component {

    constructor() {
        super()
        this.state = {
            dataList: [
                { name: 'exp: date', key: '#ffsdsf', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#01713f', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#fsdaff', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#00b0a6', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#ffgadsf', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#fdfdf', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#fsdff', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#ec008c', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#005baa', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#fceff', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#ffwf', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#000', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
                { name: 'exp: date', key: '#ea3440', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
            ]
        }
    }

    componentDidMount() {
        let arr = this.state.dataList.map((item, index) => {
            this.isSelected = false
            return { ...item }
        })
        this.setState({ dataList: arr })
    }

    selectionHandler = (ind) => {
        const { dataList } = this.state
        let arr = dataList.map((item, index) => {
            if (ind == index) {
                item.isSelected = !item.isSelected
            }
            return { ...item }
        })
        this.setState({ dataList: arr })
    }


    render() {

        const { dataList } = this.state

        return (
            <View style={styles.scrollContainer}>
                <ScrollView >
                    <View style={styles.container}>
                        {
                            dataList.map((item, index) => {
                                return (
                                    <TouchableOpacity
                                        key={item.key}
                                        onPress={() => this.selectionHandler(index)}
                                        style={styles.boxContainer}>
                                        <View style={styles.img}>{item.image}</View>
                                        <View>{item.isSelected ? <MaterialIcons name="check-box" size={24} color="#fbbe2f" /> : <MaterialIcons name="check-box-outline-blank" size={24} color="grey" />}</View>
                                    </TouchableOpacity>
                                )

                            })
                        }
                    </View>
                </ScrollView>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    scrollContainer: {
        flex: 1,
    },
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',

    },
    boxContainer: {
        height: 110,
        width: 110,
        margin: 7,

    },
    img: {
        elevation: 5,
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        shadowColor: '#000',
        shadowOffset: { width: 1, height: 2 },
        shadowOpacity: .3,
        shadowRadius: 3,
        borderWidth: 0.5,
        borderColor: '#eee'
    }

})


  [1]: https://i.stack.imgur.com/hrRVS.png

Answer 1

您已经为出现在复选框上方的图像元素设置了高度，因此在 select 操作中它得到 selected 但不可见，因为它在图像下方。

现在的问题是您将如何看到复选框？

选项 1：删除海拔

img: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        shadowColor: '#000',
        shadowOffset: { width: 1, height: 2 },
        shadowOpacity: .3,
        shadowRadius: 3,
        borderWidth: 0.5,
        borderColor: '#eee'
    }

选项 2：使图标的高度高于图像的高度

<View>
 {item.isSelected ? 
   <MaterialIcons name="check-box" size={24} color="#fbbe2f" style={{elevation:10}}/> 
    : 
  <MaterialIcons name="check-box-outline-blank" size={24} color="grey"  style={{elevation:10}}/>}
</View>

Flatlist 多项选择不适用于 React Native

Flatlist Multiple item Selection not working on React Native

multi-select

react-native

react-native-flatlist