TouchableHighlight onPress不适用于首次按下的React Native

问题描述

我正在调用媒体库中的所有图像，并将它们添加到平面列表中，我试图将按下的每个图像添加到列表中，它可以正常工作，但是只需点击几下即可将图像添加到该列表，我该如何解决？

  selectImage = (index,item) => {
    let newSelected = { ...this.state.selected };
    if (newSelected[index]) {
        delete newSelected[index];
    } else {
        newSelected[index] = item
    }
    if (Object.keys(newSelected).length > this.props.max) return;
    if (!newSelected) newSelected = {};
    this.setState({ selected: newSelected })

    const arr = Object.keys(newSelected).map(key => {
        return newSelected[key];
    });
    console.log(this.state.selected);
    console.log(arr);
}

这是我在onPress上使用的图像容器。

renderImageTile = ({ item,index }) => {
    let selected = this.state.selected[index] ? true : false;

    if (!item) return null;
    return (
        <TouchableHighlight
            style={{ opacity: selected ? 0.5 : 1 }}
            underlayColor='transparent'
            onPress={()=>this.selectImage}
        >
            <View style={{ flex: 1,alignItems: 'center',justifyContent: 'center' }} pointerEvents='none'>
                <ImageBackground
                    style={{ width: width / 4,height: width / 4 }}
                    source={{ uri: item.uri }}
                >
                </ImageBackground>
            </View>
        </TouchableHighlight >);
}

render() {
    const { hasCameraPermission } = this.state;

    if (!hasCameraPermission) {
        return this.props.noCameraPermissionComponent || null;
    }

    let selectedCount = Object.keys(this.state.selected).length;
    let headerText = selectedCount + ' Selected';


    return (
        < View style={styles.container} >
            <View style={styles.header}>
                <Button
                    title="Exit"
                    onPress={() => this.props.callback(Promise.resolve([]))}
                />
                <Text>{headerText}</Text>
                <Button
                    title="Choose"
                    onPress={() => this.prepareCallback()}
                />
            </View>
            < FlatList
                data={this.state.photos}
                numColumns={this.state.numColumns}
                key={this.state.numColumns}
                renderItem={this.renderImageTile}
                keyExtractor={(_,index) => index
                }
                onEndReached={() => { this.getPhotos() }}
                onEndReachedThreshold={0.5}
                ListEmptyComponent={this.state.isEmpty ? this.renderEmptyStay() : this.renderPreloader()}
                initialNumToRender={24}
                getItemLayout={this.getItemLayout}
            />
        </View >
    );
}

我希望onpress从第一次尝试开始就可以工作

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

expo react-native