平面列表不会显示整个列表，直到在 react-native 中向下滑动

Question

我试图弄清楚如何在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}
    // )}
/>

algolia搜索

<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>

Answer 1

尝试这个，

<View style={{flex:1}}>
    <View style={{flex:1}}>
        .....//FLatlist 1
    </View>
    <View style={{flex:1}}>
        .....//FLatlist 2
    </View>
</View>