Выравнивание текста автоматически не оправдывая в реакцию родной

Question

Как вы могли видеть на ListView где а subdescription каждого должна иметь длинную строку, весь текст просто идет непрерывно справа, а не правильно совместив сам же как это произошло в описании на синем фоне.

Мне показалось странным, что он работает не так, как только он отображается в строке списка.

Ваше понимание будет приветствоваться, как я мог бы решить эту проблему стиля.

Вот фрагмент компонента renderRow

render() { 
 
    var data = this.props.data; 
 
    var commentor = data.user_id; 
 
    var username = _.chain(this.props.userList) 
 
        .filter(function(item){ 
 
         return item.id == commentor 
 
        }) 
 
        .first() 
 
        .pick('username') 
 
        .value().username; 
 
    return (
 
     <View style={styles.container}> 
 
      <Image style={styles.avatar} source={require('../images/avatar.jpg')} /> 
 
      <View style={styles.inner_container}> 
 
      <Text style={{fontWeight: '500', fontSize: 13,textAlign:'justify'}}>{username}</Text> 
 
      <Text style={{flex: 1, fontWeight: '300', fontSize: 14, marginTop: 5, textAlign:'justify',allowFontScaling: true}}> 
 
      {data.comment} 
 
      </Text> 
 

 
      </View> 
 

 
     </View> 
 
    ); 
 
    }

Answer 1

Проблема исходит от добавления Image элемента в соответствии с текстом.

Я подозреваю, что у вас есть flexDirection: 'row' в вашем стиле container, и в этом случае текст будет продолжаться вправо, вместо того чтобы обертывать, как с flexDirection: 'column'.

Редактировать

оригинальный ответ я предоставил не лучший способ справиться с ситуацией.

Правильный способ заключается в том, чтобы обернуть текстовый компонент в View с помощью flexDirection: 'column' в стилях. Таким образом, весь контент будет использовать FlexBox, и текст будет обертываться правильно.

В этом случае:

<View style={styles.inner_container}> 
    <Text style={{fontWeight: '500', fontSize: 13}}>{username}</Text> 
    <View style={{flexDirection: 'column'}}> 
    <Text style={{flex: 1, fontWeight: '300', fontSize: 14, marginTop: 5}}> 
     {data.comment} 
    </Text> 
    </View> 
</View> 

Оригинальный ответ

я не уверен, что это лучшее решение, но вы можете сделать гибкое направление «колонками» для контейнера, а затем сделать avatar Позиция абсолютная и маржа использования, чтобы разместить текст там, где он должен быть. renderRow не нуждается в каких-либо модификациях.

Вот пример таблицы стилей:

var imageSize = 50; 

var styles = StyleSheet.create ({ 
    avatar: { 
     position: 'absolute', 
     width: imageSize, 
     height: imageSize 
    }, 
    container: { 
     flexDirection: 'column', 
     padding: 10 
    }, 
    inner_container: { 
     marginLeft: imageSize, 
     paddingLeft: 15 
    }, 
}); 

Обратите внимание, что я использую imageSize, чтобы установить размер изображения, а также поле для текста.