如何在反应本机屏幕上“锁定”组件的位置？

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

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

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

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

Answer 1

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

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

有关flex 属性here 的更多信息。 ** 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 可用空间的2/3。