在React Native视图中将<Text>彼此对齐

Question

我正在尝试在视图内部将3设置为一个在另一个下面。但是，如下面的图片所示，这是一团糟。

我的渲染方法：

renderItem = ({ item }) => {
    const callIcon = 'https://img.icons8.com/color/48/000000/phone.png';

    return (
      <TouchableOpacity>
        <View style={styles.row}>
          <Image source={{ uri: item.image }} style={styles.pic} />
          <View>
            <View style={styles.nameContainer}>
              <Text style={styles.nameTxt}>{item.name}</Text>
            </View>
            <View style={styles.end}>
              <Text style={styles.details}>Unit: {item.unitName}</Text>
              <Text style={styles.details}>{'\n'}Lease End Date: {item.leaseEndDate}</Text>
              <TouchableOpacity onPress={() => this.sendEmail(item.tenantEmail)}>
                <Text style={styles.details}>Email: {item.tenantEmail}</Text>
              </TouchableOpacity>
            </View>
          </View>
          <TouchableOpacity onPress={() => this.makeCall(item.tenantPhone)}>
            <Image style={[styles.icon, { marginRight: 50 }]} source={{ uri: callIcon }} />
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }} >
        <FlatList
          extraData={this.state}
          data={this.state.calls}
          keyExtractor = { (item) => {
            return item.id;
          }}
          renderItem={this.renderItem}
        />
      </View>
    );
  }

这是我的风格：

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    borderColor: '#dcdcdc',
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    padding: 10,
    justifyContent: 'space-between',

  },
  pic: {
    borderRadius: 25,
    width: 50,
    height: 50,
  },
  nameContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: 270,
  },
  nameTxt: {
    marginLeft: 15,
    fontWeight: '600',
    color: '#222',
    fontSize: 15,

  },
  mblTxt: {
    fontWeight: '200',
    color: '#777',
    fontSize: 13,
  },
  end: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  details: {
    fontWeight: '400',
    color: '#666',
    fontSize: 12,
    marginLeft: 15,
  },
  icon: {
    height: 28,
    width: 28,
  }
});

如何固定屏幕？

顺便说一句...我曾经用于引导和前端开发，但是我是本机反应的新手，所以如果我开发的屏幕不正确，请告诉我

Answer 1

在flexDirection中将column设置为styles.end。由于alignItems是center，因此它们都将居中，因此您可以将其删除以将它们全部向左对齐。

end: {
  flexDirection: 'column',
},