React Native FlatList，绝对位置位于组件后面

Question

我有多个 SearchBar 组件，当我搜索某些内容时，它会显示一个 FlatList，我希望 Flatlist 位于下面的其余 SearchBars 组件之上，所以我添加了

position: absolute

，但它仅适用于第一个元素，从第二个元素开始，列表显示在 SearchBars 后面，我还将

zIndex: 100

添加到列表和容器中，但它保持不变。 SearchBars 添加了数组映射：

export default function Game() {

    const arr = [0,1,2,3]
    const data = Data.players

    const [filteredData, setFilteredData] = React.useState([])
    const [actualPosition, setActualPosition] = React.useState(0)

    function search(text) {
        if(text.length < 3) return setFilteredData([])
        if(text.length >= 3){
            setFilteredData(data.filter(i => i.name.toLowerCase().includes(text.toLowerCase())))
        }
    }

    const getItem = (item) => {
        // Function for click on an item
        setActualPosition(actualPosition + 1)
        setFilteredData([])
    };  

    const ItemView = ({ item }) => {
        return (
            // Flat List Item
            <TouchableOpacity onPress={() => getItem(item)}>
                <View style={{flexDirection: 'row'}}>
                    <Text>{item.name}</Text>
                </View>
            </TouchableOpacity>
        );
    };
  
    return (
        <SafeAreaView style={styles.container} >
            {arr.map(i => {
                return (
                <View style={styles.container2} pointerEvents={actualPosition === i ? 'auto' : 'none'}>
                    <SearchBar
                        style={styles.searchBar}
                        placeholder="Search..."
                        onChangeText={(text) => search(text)}
                        onSearchPress={() => console.log("Search Icon is pressed")}
                        onClearPress={() => search("")}
                    />
                    {actualPosition === i && filteredData.length > 0 &&
                        <View style={styles.flatListContainer}>
                            <FlatList 
                                scrollEnabled={false}
                                style={styles.flatList}
                                data={filteredData}
                                keyExtractor={(item, index) => index.toString()}
                                renderItem={ItemView}
                            />
                        </View>
                        }
                </View>
                )
            })}     
        </SafeAreaView>
    );
} 

CSS 是：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  container2: {
    flexDirection: 'column',
    width: '100%',
    alignItems: 'center',
  },

  searchBarContainer: {
    marginTop: 5,
    width: '125%'
  },
  searchBar: {
    borderBottomWidth: 0.75,
    marginBottom: 5
  },
  flatListContainer: {
    position: 'relative',
    marginLeft: 30,
    zIndex: 100,
    width: '100%'
  },
  flatList: {
    position:'absolute',
    zIndex: 100,
    borderWidth: 0.75,
    backgroundColor: 'white',
    width: '95%'
  },
});

export { styles };

我希望所有列表都显示在其余组件上，为什么只适用于第一个元素？

谢谢你。

Answer 1

如果有人有同样的问题，我解决了它，也许这不是最好的解决方案，但它有效，我只是添加了以下内容：

{arr.map(i => {
    return (
        <View style={[styles.container2, {zIndex: -i}]} pointerEvents={actualPosition === i ? 'auto' : 'none'}>

在搜索栏上方的视图中，将

zIndex

改为负数 [索引] 效果很好。

Answer 2

请尝试使用 { zIndex: -index } 添加您的搜索栏视图，一些数字索引为 < 0. Anh your flatlist will have zIndex > 0