FlatList / ScrollView在可触摸对象之间不滚动

问题描述

我有一个FlatList，其中包含Touchables作为其renderItems。由于某种原因，除非您在其中一个可触摸对象上开始滚动，否则滚动将不起作用。也就是说，如果我单击项目之间的空格（填充/边距）并尝试滚动，则无法使用。

        <Modal
            onStartShouldSetResponder={() => true}
            animationType="slide"
            transparent={true}
            visible={modalVisible}>
            <View onStartShouldSetResponder={() => true} style={styles.modalView}>
                <Text style={styles.modalText}>Comments</Text>

                <FlatList
                    onStartShouldSetResponder={() => true}

                    data={comments}
                    renderItem={(item) => {
                        return <Comment key={item.item.text} item={item.item} />;
                    }}></FlatList>
            </View>
        </Modal>

如您所见，我尝试在所有地方放置onStartShouldSetResponder，但似乎什么也没做。

作为参考，这是Comment组件的外观：

const Comment = ({item}) => {
        console.log('nothing MAKES SENSSEEE');
        console.log('comment id,cluck id',item.cluck,data.id,data.username);
        return (
            <View key={item.text} style={styles.commentWrapperStyle}>
                <View style={{flex: 1,flexDirection: 'row'}}>
                    <Image
                        source={{
                            uri: item.user.photoURL,}}
                        style={styles.profileStyle}
                    />
                    <TouchableOpacity
                        onPress={() => {
                            setReplyPlaceholder(`Reply to ${item.user.name}`);
                            inputEl.current.focus();
                            setSendFunction(
                                () =>
                                    function (event) {
                                        if (event.nativeEvent.text.trim() !== '') {
                                            const user = firebase.auth().currentUser;
                                            var db = firebase.firestore();
                                            const id = 'UbWIMWFCOGbs00S2ZcPN';
                                            const newReplies = item.replies + 1;
                                            console.log(item.replies,item.children);
                                            item.children.push({
                                                user: {
                                                    name: user.displayName,photoURL: user.photoURL,userId: user.uid,},cluck: data.id,text: event.nativeEvent.text,likes: 2,});
                                            db.collection('comments').doc(id).update({
                                                replies: newReplies,children: item.children,});
                                            setComment('');
                                        }
                                    },);
                        }}
                        style={{}}>
                        <View style={{flex: 1,flexDirection: 'row'}}>
                            <Text style={styles.textBold}>{item.user.name}</Text>
                            <Text style={styles.textBold}>
                                {renderPostTime(new Date(),item.date)}
                            </Text>
                        </View>
                        <Text style={styles.commentTextStyle}>{item.text}</Text>
                    </TouchableOpacity>
                </View>
                <RepliesButton item={item} />
            </View>
        );
    };

开始在图像上滚动也不做任何事情。由于某些原因，滚动仅响应Touchable。

解决方法

我通过大量使用手势响应器系统https://reactnative.dev/docs/gesture-responder-system来修复它。

具体地说，我不得不用包裹在scrollview中的View替换FlatList。视图具有onMoveShouldSetResponder = {（evt）=> true}的道具：

<ScrollView>
    <View onMoveShouldSetResponder={(evt)=>true}>
        ...
    </View>
</ScrollView>

我原来的TouchableWithoutFeedback包裹了我必须替换的所有东西

<View onStartShouldSetResponder={()=>{
    setState(true);
    return false;
    }}
>
...
</View>

返回false之前的setState很重要，因为它可以让我做我想做的事情，而不必阻止ScrollView在需要时控制触摸。

无论如何，所有这些都破坏了我本来作为renderItem组件的内部Touchable组件，因此我必须用响应道具用相似的View替换它们。