reactjs - 在 react-native 中向下滑动之前，FlatList 不会显示整个列表

问题描述

我试图弄清楚如何在超过 2 中显示整个列表FlatList。

如果我在一个屏幕上使用 2 个平面列表，则无法正确显示。由于上面的一个平面列表，FlatList我猜底部的高度无法显示整个列表。

这是我的代码。

物品清单

// Hits.js
<FlatList
    data={hits}
    onEndReached={this.onEndReached}
    keyExtractor={(item, index) => index.toString()}
    keyboardShouldPersistTaps={'handled'}
    renderItem={({item}) => {
        return (
            <Fragment>
                {
                    item.city ? imgUrl = require('...') : imgUrl = require('...')
                }
                <TouchableOpacity
                    onPress={() => item.city ? this.props.moveToDetail(item.name) : this.props.moveToList(item.name)}
                    style={styles.separator}>
                    {
                        this.searchListRender(item, imgUrl)
                    }
                </TouchableOpacity>
            </Fragment>
        );
    }}
    // getItemLayout={(data, index) => (
    //     {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
    // )}
/>

阿尔及利亚搜索

<InstantSearch
    appId={ALGOLIA_APP_ID}
    apiKey={ALGOLIA_API_KEY}
    indexName={ALGOLIA_INDEX_NAME}
>
    <View
        style={{
            flexDirection: 'row',
            backgroundColor: '#f90631',
            padding: 10
        }}
    >
        <SearchBox _onKeyPressed={this._onKeyPressed}/>
    </View>
    {
        flag ?
            <Fragment>
                <View>
                    <Text>Tags</Text>
                    <Index indexName={ALGOLIA_INDEX_NAME}>
                        <Hits moveToList={this.moveToList}/>
                    </Index>
                </View>
                <View>
                    <Text>Stores</Text>
                    <Index indexName="stores">
                        <Hits moveToDetail={this.moveToDetail}/>
                    </Index>
                </View>
            </Fragment>
            : null
    }

</InstantSearch>

标签： reactjsreact-nativealgolia

reactjs - 在 react-native 中向下滑动之前，FlatList 不会显示整个列表

问题描述

解决方案

推荐阅读