React Native:如何在滚动视图的下方呈现列表?

时间:2020-06-01 22:32:24

标签: react-native scrollview react-native-flatlist

美好的一天,

我正在用expo构建一个React Native应用,并且我有一张需要渲染但在屏幕下方的照片列表。

我的问题是我之前需要滚动视图来呈现内容,但是滚动视图内没有列表,因此我试图将我的平面列表放在结束标签scrollview之后,但现在该平面列表呈现页面中间和以上内容可从中页向上滚动。

我想做的是从屏幕顶部一直到我的单位列表末尾的连续视图。 我尝试将scrollview的flex设置为1,这样它将占据所有屏幕,但没有。

谢谢您的帮助!

编辑

renderFeed =(数据)=>

    <View style={{ marginTop: 25, marginLeft: 5 }}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('EditContact', { id: data.item.id })}>
            <Image style={{ width: 300, height: 300, marginRight: 5 }}
                source={{ uri: data.item.profile }}>
            </Image>
        </TouchableOpacity>
        <Text style={{ color: '#fff', fontSize: 20, marginBottom: 10, marginTop: 10, marginLeft: 5, alignSelf: 'center' }}>{data.item.name}</Text>
    </View>

render(){

    return (

        <View style={styles.container}>
            <View>
              // top of the page outside of scrollview
            </View>
            <ScrollView>
                <View>
                  // some text and a horizontal flatlist that renders as 
                  // expected
                </View>
                </ScrollView>
            <FlatList
                data={this.state.infoSource}
                renderItem={item => this.renderFeed(item)}
                keyExtractor={item => item.id.toString()}
                numColumns={2}
            />
        </View>
    );
}

}

0 个答案:

没有答案