我正在尝试做的事情：

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。

试试这个，让我知道这是否解决了您的问题。

当后面没有任何内容时，无法滚动绝对位置的FlatList

我正在尝试做的事情：

我所拥有的：

问题：

我需要什么：

1 个答案: