React Native - 组件的意外渲染

Question

我正在构建的React Native应用中呈现ListView，并且发现该行的父View容器未扩展以适应其中的所有内容我不确定为什么。

请参阅下面的屏幕截图，了解行中第二行如何在行view的边缘内呈现：

组件如下：

import React from 'react';
import { connect } from 'react-redux';

import {
  View,
  Text
} from 'react-native';
import { Icon } from 'native-base';

const ListViewRow = (props) => {
  const { booking } = props;
  const guest = props.guests[booking.guest_id];

  return (
    <View style={styles.rowStyle}>
      <View style={styles.leftContentStyle}>
        <View>
          <Text>{guest.fullname}</Text>
        </View>
        <View>
          <Text>{booking.start_date} - {booking.end_date}</Text>
        </View>
      </View>
      <View style={styles.rightContentStyle}>
        <Icon name='ios-arrow-forward' />
      </View>
    </View>
  );
};

const styles = {
  rowStyle: {
    flex: 1,
    borderBottomWidth: 1,
    padding: 10,
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  },
  leftContentStyle: {
    alignItems: 'stretch'
  },
  rightContentStyle: {
    flexDirection: 'row',
    alignItems: 'center'
  }
};

const mapStateToProps = state => {
  return { guests: state.guests };
};

export default connect(mapStateToProps)(ListViewRow);