Javascript React Native-组件的意外呈现

我正在构建的React本机应用程序中呈现一个

列表视图

，发现行的父

视图

容器没有扩展以适应其中的所有内容，我不确定原因

请参见下面的屏幕截图，该行中的第二行如何在该行的边距内呈现

视图

：

组成部分如下：

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);

从“React”导入React；
从'react redux'导入{connect}；
进口{
看法
正文
}从“反应本机”；
从“本机基”导入{Icon}；
常量ListViewRow=（道具）=>{
const{booking}=道具；
const guest=props.guests[booking.guest_id]；
返回(
{guest.fullname}
{booking.start_date}-{booking.end_date}
);
};
常量样式={
行样式：{
弹性：1，
边界宽度：1，
填充：10，
背景颜色：“#fff”，
justifyContent:'之间的空间'，
flexDirection:'行'，
边框颜色：'#ddd'，
位置：'相对'
},
leftContentStyle：{
对齐项目：“拉伸”
},
rightContentStyle：{
flexDirection:'行'，
对齐项目：“中心”
}
};
常量mapStateToProps=状态=>{
返回{来宾：state.guests}；
};
导出默认连接（MapStateTops）（ListViewRow）；