绝对定位时 FlatList 滚动中断

Question

反应原生：0.63.3

首先让我先说我现在已经花了大约 6 小时试图解决这个问题，但我还没有在任何地方找到适合我的设置的在线解决方案。

我所拥有的是具有以下布局的页面（从实际用例大大简化，但同样的问题）

每个红色框都是一个视图。搜索输入下拉菜单设置为覆盖红色框视图，它确实

但问题是，只有当我的鼠标位于搜索输入和第一个视图之间的那个空间中时，FlatList 才会滚动。一旦我的鼠标位于 View 上方，FlatList 似乎会忽略滚动。

这是该代码的最基本版本：

import React, { useState } from 'react';
import { FlatList, View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

export const myStyles = StyleSheet.create({
    container: {
        minWidth: '100%',
        borderRadius: 3,
        padding: 10,
        backgroundColor: 'white'
    },
    search: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        flex: 1,
        height: 50,
        marginBottom: 50
    },
    textInput: {
        width: '100%',
        borderWidth: 1,
        borderColor: 'blue'
    },
    flatlistContainer: {
        position: 'absolute',
        zIndex: 99999,
        height: 180,
        width: 300
    },
    inputRow: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 0,
        paddingRight: 0,
        paddingTop: 5,
        paddingBottom: 5
    },
    itemRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: 'silver'
    },
    buttonText: {
        alignSelf: 'flex-start',
        fontSize: 13,
        margin: 0,
        padding: 5
    }
});

const MyComponent = () => {
    const [inputValue, setInputValue] = useState('');

    const options = [
        {label: 'one', value: 'one'},
        {label: 'two', value: 'two'},
        {label: 'three', value: 'three'},
        {label: 'four', value: 'four'},
        {label: 'five', value: 'five'},
        {label: 'six', value: 'six'},
        {label: 'seven', value: 'seven'},
        {label: 'eight', value: 'eight'},
        {label: 'nine', value: 'nine'},
        {label: 'ten', value: 'ten'},
        {label: 'eleven', value: 'two'}
    ];

    return (
        <View style={myStyles.container}>
            <View style={[myStyles.inputRow, { zIndex: 9999999 }]}>
                <View style={[myStyles.search]}>
                    <TextInput
                        value={inputValue}
                        onChangeText={(value) => setInputValue(value)}
                        placeholder="Search..."
                        style={myStyles.textInput}
                    />
                    <View>
                        <View style={myStyles.flatlistContainer}>
                            <FlatList
                                data={options}
                                renderItem={({ item }) => (
                                    <TouchableOpacity onPress={() => console.log ('pressed')}>
                                        <View style={myStyles.itemRow}>
                                            <Text style={myStyles.buttonText}>
                                                {item.label}
                                            </Text>
                                        </View>
                                    </TouchableOpacity>
                                )}
                                keyExtractor={item => item.label}
                            />
                        </View>
                    </View>
                </View>
            </View>

            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
        </View>
    );
}


export default MyComponent;

Answer 1

终于解决了我的问题。与视图的嵌套方式有关。尽管平面列表呈现在其他项目之上，但滚动不起作用。这种新的布局也让 Flatlist 的滚动再次起作用

export const myStyles = StyleSheet.create({
    inputRow: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 0,
        paddingRight: 0,
        paddingTop: 5,
        paddingBottom: 5
    },
    itemRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: 'silver'
    },
    buttonText: {
        alignSelf: 'flex-start',
        fontSize: 13,
        margin: 0,
        padding: 5
    }
});

const MyComponent = () => {
    const [inputValue, setInputValue] = useState('');

    const options = [
        {label: 'one', value: 'one'},
        {label: 'two', value: 'two'},
        {label: 'three', value: 'three'},
        {label: 'four', value: 'four'},
        {label: 'five', value: 'five'},
        {label: 'six', value: 'six'},
        {label: 'seven', value: 'seven'},
        {label: 'eight', value: 'eight'},
        {label: 'nine', value: 'nine'},
        {label: 'ten', value: 'ten'},
        {label: 'eleven', value: 'two'}
    ];

    return (
        <View style={{
            borderWidth: 1,
            borderColor: 'blue'
        }}>
            <View style={{
                borderWidth: 2,
                borderColor: 'orange',
                position: 'absolute',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                zIndex: 99
            }}>
                <TextInput
                    value={inputValue}
                    onChangeText={(value) => setInputValue(value)}
                    placeholder="Search..."
                    style={{ backgroundColor: 'grey' }}
                />
                <FlatList
                    data={options}
                    renderItem={({ item }) => (
                        <TouchableOpacity onPress={() => console.log ('pressed')}>
                            <View style={myStyles.itemRow}>
                                <Text style={myStyles.buttonText}>
                                    {item.label}
                                </Text>
                            </View>
                        </TouchableOpacity>
                    )}
                    keyExtractor={(item) => item.label}
                />
            </View>
            <View>
                <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
                <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
                <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
                <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
                <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
                <View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
            </View>
        </View>
    );
}

export default MyComponent;

Answer 2

你可以这样做，因为在这里我看到你的平面列表落后了，所以你的平面列表不起作用

flatlistContainer: {
        position: 'absolute',
        height: 180,
        width: 300,
        elevation: 4,
        zIndex: 1000
    },