如何在本机中创建复杂的UI？

Question

我已经阅读了很多关于反应原生界面的文章，但我对front-end仍然如此糟糕，所以每当我尝试创建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;

任何人都可以帮助我如何取得我的成绩？

Answer 1

您想将flexDirection设置为白色 'row'中的<View>，其中包含您想要的两个视图彼此按行排列。这应该给你一个开始。你的风格应该是这样的：

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

您还可以将图片周围的alignItems <View>属性设置为'center'，以便图片在该视图中垂直居中。