react原生屏幕的布局如何设计？

Question

当涉及到用户个人资料时，我正在尝试使我的应用程序的布局与 Instagram 非常相似。这是我尝试复制的布局示例：

这是我所拥有的：

如何复制设计？您在我的实现中看到的所有内容都是它自己的功能组件（即个人资料图片、个人资料统计信息 [帖子、关注者、关注]、简历和设置按钮）。这就是我的布局方式：

 <View style={styles.container}>

            
            <View style={{flexDirection: 'row', justifyContent: 'left', alignItems: 'center' }}>

                <Text style = {styles.subheader}> {this.state.user.username}'s profile  </Text>

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

            </View>

            <View style = {styles.lineStyle} />
            
            <View style={{flexDirection: 'row', justifyContent: 'left', alignItems: 'center' }}>

                 <ProfilePic/>

                 <ProfileStats/>
                 
            </View>

            <ProfileBio />
            
            
        </View>

Answer 1

您需要添加更多视图

这段代码会帮助你

return (
    <View style={{ flexDirection: "column" }}>
      <View style={{ flexDirection: "row" }}>
        <text> Chloewest28</text>
        <Icon> Chloewest28</Icon>
      </View>

      <View style={{ flexDirection: "row" }}>
        <Image>{/* Profile picture */}</Image>
        <View style={{ flexDirection: "column" }}>
          <View style={{ flexDirection: "row" }}>
            <Text>1042</Text>
            <Text>1214</Text>
            <Text>1696</Text>
          </View>
          <View style={{ flexDirection: "row" }}>
            <Text>Posts</Text>
            <Text>Followers</Text>
            <Text>Following</Text>
          </View>
        </View>
      </View>
    </View>
  );