react-native - React Native：文本走出屏幕

Question

我有一个问题，文本离开屏幕而不是换行。

这是代码和样式表。感谢有人可以让我知道发生了什么以及如何解决。

参考了这篇文章，但无法让它工作。

<View style={styles.columnContainer}>

        <View style={styles.rowDetails}>
          <Text style={styles.header}>Customer Details</Text>
        </View>

        <View style={styles.rowItem}>
          <Icon name="user-o" style={styles.userIcon}/>
          <Text style={styles.textCustomer}>
            {this.props.currentTask.customer.title} {this.props.currentTask.customer.first_name} {this.props.currentTask.customer.last_name}
          </Text>
          <View style={{flex: 0.1, backgroundColor: 'orange'}}/>
        </View>

        <View style={styles.rowItem}>
          <Icon name="map-marker" style={styles.addressIcon}/>
          <View style={styles.row}>
          {
            this.props.currentTask.address ? (
              <Text style={styles.textCustomer}>
                { this.props.currentTask.address.street ? `${this.props.currentTask.address.street}, ` : null }
                { this.props.currentTask.address.landmark ? `${this.props.currentTask.address.landmark}, ` : null }
                { this.props.currentTask.address.area ? `${this.props.currentTask.address.area}, ` : null }
                { city ? `${city}, ` : null }
                { state ? `${state}, ` : null }
                { country }
              </Text>
            ) : (
              <Text style={styles.textCustomer}>(No Address Selected)</Text>
            )
          }
          </View>
          {
            this.props.currentTask.address ?
            <Icon name="chevron-right" onPress={this.onPressAddress.bind(this)} style={styles.rightIcon}/> :
            <Icon name="plus" onPress={this.onPressAddress.bind(this)} style={styles.rightIcon}/>
          }
        </View>

        <View style={styles.rowItem}>
          <Icon  name="phone" style={styles.phoneIcon}/>
                  <View style={styles.row}>
          {
            this.props.currentTask.phone ? (
              <Text style={styles.textCustomer}>
                {this.props.currentTask.phone.phone_number} ({this.props.currentTask.phone.phone_type})
              </Text>
            ) : (
              <Text style={styles.textCustomer}>(No Phone Selected)</Text>
            )
          }
          </View>
          {
            this.props.currentTask.phone ?
            <Icon name="chevron-right" onPress={this.onPressPhone.bind(this)} style={styles.rightIcon}/> :
            <Icon name="plus" onPress={this.onPressPhone.bind(this)} style={styles.rightIcon}/>
          }
        </View>

      </View>

样式表：

  columnContainer:{
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
  rowDetails:{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  //section header like Customer Details / Task Details
  header:{
    flex: 1,
    paddingVertical: 8,
    paddingHorizontal: 10
  },
  //every row item
  rowItem:{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    paddingVertical: 8,
    paddingLeft: 7,
    paddingRight: 3,
    marginBottom: 2,
    backgroundColor: COLOR_TASK_DETAILS_ROW,
  },
  row: {
    flex: 0.8,
    flexDirection: 'column',
    //flexWrap: 'wrap',
    //backgroundColor: 'blue',
  },
  //right chevron icon
  rightIcon: {
    flex: 0.1,
    //width: 20,
    fontSize: 15,
    color: COLOR_TASK_DETAILS_ICON_ARROW,
    alignSelf: 'center',
    backgroundColor: 'orange'
  },
  //***************************** customer details ****************************
  userIcon: {
    flex: 0.1,
    //width: 20,
    fontSize: 15,
    color: COLOR_TASK_DETAILS_ICON,
    //marginRight: 2,
    marginLeft: 5,
    alignSelf: 'center',
    backgroundColor: 'orange'
  },
  textCustomer: {
    flex: 1,
    marginLeft: 5,
    flexWrap: 'wrap',
    textAlign: 'left',
    backgroundColor: 'red',
  },
  addressIcon: {
    flex: 0.1,
    //width: 20,
    fontSize: 18,
    color: COLOR_TASK_DETAILS_ICON,
    marginLeft: 7,
    //marginRight: 2,
    alignSelf: 'center',
    backgroundColor: 'orange'
  },
  phoneIcon: {
    flex: 0.1,
    //width: 20,
    fontSize: 18,
    color: COLOR_TASK_DETAILS_ICON,
    //marginRight: 2,
    marginLeft: 5,
    alignSelf: 'center',
    backgroundColor: 'orange'
  },