User interface 如何在react native中创建复杂的UI？

我读过很多关于react native interface的文章，但我对前端的

还是很差，所以每次我尝试创建UI时，我都会遇到一个归档问题

我当前的界面看起来很奇怪：


预期结果：


当前代码：

import React, { Component } from 'react';
import {
  Text,
  View,
  Button,
  ScrollView,
  Image
} from 'react-native';

class MyPatient extends React.Component {
  render() {
    return (
      <View style={{backgroundColor:'green', borderRadius: 10, margin:5, height:100}}>
        <View style={{
          backgroundColor:'white',
          marginLeft:15,
          borderRadius:10,
          height:100,
          justifyContent: 'center',
          flexDirection: 'column',
          }}>
          <View style={{borderColor:'red', borderWidth:2, width:50, height: 100}}>
          <Image 
            style={{width:50, height:50, borderRadius:200, }}
            source={{uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg'}}/>
          </View>
          <View style={{justifyContent: 'center', flexDirection: 'row',}}>
            <Text>Asdasdadasdasdsada</Text>
          </View>
        </View>
        <View>
          <Text>qweqwqeweqeweqeqwex</Text>
        </View>
      </View>
    );
  }
}

export default MyPatient;

import React，{Component}来自'React'；
进口{
文本
看法
按钮
滚动视图，
形象
}从“反应本机”；
类MyPatient扩展了React.Component{
render（）{
返回(
阿斯达斯达，斯达斯达
qweqwqeweqeweqeqwex
);
}
}
导出默认MyPatient；

任何人都可以帮助我如何归档我的结果吗？
您想将
flexDirection
设置为
白色
中的
'row'
，其中包含两个视图，您希望将它们按行放置。这应该给你一个开始。你的风格应该是：

{
    backgroundColor:'white',
    marginLeft:15,
    borderRadius:10,
    height:100,
    justifyContent: 'center',
    flexDirection: 'row',
}

您还可以将图像周围的
属性的
alignItems
设置为
'center'
，以便图像在该视图中垂直居中。
@Downvoter，看到Downvoter在没有注释的情况下操作很有趣我添加了一个答案，应该会让您有一个开始。@如果你又被卡住了，就告诉我！好的起点让我实现了我的目标，