react-native - 当它后面没有任何东西时，无法滚动绝对定位的 FlatList

Question

我正在尝试做的事情:

制作一个搜索栏并将结果显示在栏下方的平面列表中。

我拥有的:

我有一个 SearchBar 和一个 FlatList，FlatList 需要但在绝对位置，所以它覆盖了搜索栏底部的内容

问题:

当 FlatList 处于事件状态时，它会覆盖搜索栏，我无法滚动列表或选择项目。我注意到，如果我在单击 SearchBar 应该出现的位置时尝试选择一个项目或滚动列表，我可以选择并滚动列表。

我需要的:

要在 SearchBar 下显示并能够滚动它的 FlatList。
我可以用 top: 50在 SearchBar 下显示 FlatList 但它看起来并不好

观察:我不太擅长风格

import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableHighlight, FlatList } from 'react-native'
import {
    Slider,
    SearchBar,
    ListItem,
} from 'react-native-elements'

export default class SearchForm extends Component {

    state = {
        pages: 1,
        displayList: false,
        itemsPerPage: 5,
    }

    componentDidMount = async () => {
        const {
            data = [],
            itemsPerPage = 5,
        } = this.props


        await fetch('https://servicodados.ibge.gov.br/api/v1/localidades/estados', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
        })
            .then(res => res.json())
            .then(data => this.setState({ 
                data: data, 
                displayData: data.slice(0, itemsPerPage) 
            }))

        console.log(this.state.data.length)
    }

    updateSearch = search => {
        const { data, itemsPerPage } = this.state
        let s = search ? search.toLowerCase() : ''
        this.setState({
            displayData: data.filter(res => res.nome.toLowerCase().includes(s)).slice(0, itemsPerPage),
            displayList: true,
            search: search,
            pages: 1,
        })
        if(this.flatListRef){
            this.flatListRef.scrollToOffset({ animated: true, offset: 0 })
        }
    }

    loadMore = () => {
        const { pages, displayData, data, search, itemsPerPage } = this.state
        const start = pages * itemsPerPage
        let end = (pages + 1) * itemsPerPage
        let s = search ? search.toLowerCase() : ''
        const newData = data.filter(res => res.nome.toLowerCase().includes(s)).slice(start, end)
        this.setState({
            displayData: [...displayData, ...newData],
            pages: pages + 1,
        })
        console.log(this.state.displayData.length)
    }

    selectItem = (value) => {
        this.setState({
            search: value,
            displayList: false,
        })
    }

    renderItem = ({ item, index }) => {
        return (
            <ListItem
                style={styles.flatListItem}
                containerStyle={styles.flatListItemCointainer}
                key={index}
                title={item.nome}
                onPress={() => this.selectItem(item.nome)}
            />
        );
    }

    render() {

        const {
            search,
            displayData = [],
            displayList,
        } = this.state

        return (
            <View style={styles.container}>
                <SearchBar
                    ref={search => { this.search = search }}
                    placeholder="Type Here..."
                    leftIcon={false}
                    noIcon
                    onChangeText={this.updateSearch}
                    value={search}
                />
                {displayList && <FlatList
                    style={styles.flatList}
                    ref={ref => this.flatListRef = ref}
                    data={displayData}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this.renderItem}
                    onEndReached={this.loadMore}
                    onEndReachedThreshold={0.5}
                />}
                <TextInput
                    style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                    onChangeText={(text) => this.setState({ text })}
                    value={this.state.text}
                />
                <TextInput
                    style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                    onChangeText={(text) => this.setState({ text })}
                    value={this.state.text}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        alignSelf: 'stretch',
        backgroundColor: '#fff',
    },
    flatList: {
        height: 200,
        width: '100%',
        position: 'absolute',
    },
    flatListItemCointainer: {
        backgroundColor: 'rgba(0,0,0,1)'
    }
})

编辑:我只是稍微更改代码以显示我正在尝试做的事情。在 SearchBar 下将有其他组件(例如 TextInput)，并且当列表处于事件状态时，该列表应位于该组件之上。
有了 Shashin Bhayani 的回答，它不会在它下面的事情上进行，只会将其推下。

Answer 1

添加 bottom: 0解决了我的问题我使用零是因为我希望 Faltlist 在屏幕的最底部结束，它可以是任何数字。
确保没有 flex: 1在平面列表中 style , contentContainerStyle或在父平面列表上。
试试这个，让我知道这是否解决了你的问题。