如何在反应原生屏幕上“锁定”组件的 position？

Question

我正在尝试在我的社交网络应用程序上构建用户的个人资料屏幕。 我想要的方式是屏幕的顶部 1/3 是用户个人资料信息，底部 2/3 是所有用户帖子的平面列表。 目前，我有所有工作逻辑明智。 这是应用程序的屏幕截图：

如您所见，用户个人资料信息显示在顶部，并且用户的帖子历史记录正确显示在下面的平面列表中。 但是，平面列表正在将用户配置文件信息“向上”推送到屏幕上。

这是配置文件的代码：

class Profile extends React.Component {

constructor(props) {
    super(props)
    this.state = {
        user: this.props.user
    }
    
}

goToSettings = () => {
    this.props.navigation.navigate('Settings')
}

render() {
    return (
        <View style={styles.container}>

            <View style={{ flexDirection: "row", padding: 20 }}>
                <Text style = {styles.subheader}> {this.state.user.username} </Text> <------The username is being pushed up, where only the bottom half of it is visible

                <TouchableOpacity 
                    onPress={this.goToSettings}>
                    <Ionicons name="ios-settings" size={24} color="black" />
                </TouchableOpacity>

            </View>



            <View style = {styles.lineStyle} />
            
            <View style={{ flexDirection: "row" }}>
                <ProfilePic/> 
                <ProfileStats/>
            </View>

            <View style = {styles.lineStyle} />

            <ProfileBio />

            <View style = {styles.lineStyle} />
            
            <View style={{ flexDirection: "row", alignItems: 'center', justifyContent: 'center' }}>
                <CurrentUserPostFeed navigation = {this.props.navigation} /> <------ This is the flat list. It is pushing up the views & other components that are above it.
            </View>           

        </View>
    )
}
}

我希望用户个人资料信息的 position 保持在同一位置，占据屏幕的顶部 1/3，而用户可以滚动浏览仅占屏幕底部 2/3 的平面列表

但是，我不确定如何将个人资料信息“锁定”到位，无论帖子的平面列表有多大/多小，它始终在个人资料屏幕的顶部 1/3 中可见。 有什么建议吗？

编辑：似乎平面列表单元格中的边距/填充导致了我的问题。 当我添加 marginTop 或 paddingTop 时，有没有办法可以防止 flatlist 容器将其上方的元素“向上”推？

Answer 1

您应该使用flex属性来设置哪个

指定弹性容器中剩余空间的多少应该分配给项目

更多关于flex属性的信息在这里。 ** flex是flex-grow的简写。

因此，您可以执行以下操作：

<View> // main container
    <View style={{flex: 1}}> // header container
       // Header Content
    </View>
    <View style={{flex: 2}}> // flatlist container
        // Flatlist content
    </View>
</View>

基本上我们在这里所做的是将header设置为使用main-container可用空间的 1/3 和flatlist使用main-container -container 可用空间的 2/3。