文本对齐不能在本机中进行自动对齐

Question

正如您在listview上看到的那样，每个的子描述应该有一个长字符串，整个文本只是连续向右移动而不是正确对齐自己与蓝色背景上的描述相同。

我觉得奇怪的是，当它在listview的行上呈现时，它的功能不同。

欢迎您就我如何解决这个样式问题提出见解。

以下是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'的{​​{1}}中。这样所有内容都将使用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>

原始回答

我不确定它是最好的解决方案，但你可以制作弹性方向列＃39;对于您的容器，然后将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来设置图片的大小以及文本的边距。