对齐项：中心防止React Native中的弹性行文本换行

Question

由于某些原因，在容器视图的样式中设置alignItems:center会导致flex行中的文本停止换行，并且不遵守容器视图的填充。

这里的工作示例和代码：https://rnplay.org/apps/FsDXuQ

我尝试按照建议将flexDirection设置为列，使用flex： 1或flexWap，但唯一有效的是从容器视图中删除对齐项：中心。

我不明白这是怎么回事。如果我想：

1. 不占屏幕全宽的行元素
2. 居中，
3. 其中包含长文本，
4. 哪个包裹

谢谢。

Answer 1

我自己一直在搜索来解决这个问题：

textStyle: {
    textAlign: 'center',
}

本文提供：http://moduscreate.com/aligning-children-using-flexbox-in-react-native/

去掉直接父级中的任何对齐项以允许flexWap发生。

Answer 2

我们在我的公司也遇到了同样的问题，据我所知，没有什么非黑客的方法可以绕过它。

我们处理它的方法是从主容器中完全删除alignItems属性，并给容器一个flex:1属性。然后，我们使用alignItems:“居中”到我们需要的任何子组件，而不将样式传播到所有子组件。

我在这里建立了一个例子，并粘贴了下面的代码。

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
  Dimensions
} = React;

var width = Dimensions.get('window').width

var shortText = "Lorem ipsum dolor sit amet, consectetur adipis.";
var longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin ligula ut leo dictum, id elementum sapien faucibus. Nullam et feugiat neque";

var SampleApp = React.createClass({ 
  render: function() {
    return (
      <View style={styles.container}>
        <View style={ styles.alignCenter }>
            <Text>{shortText}</Text>
             </View>
        <Text/>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
          <Image source={{uri: "http://icons.iconarchive.com/icons/designbolts/free-male-avatars/128/Male-Avatar-icon.png"}} style={{height: 32, width: 32}}/>
          <View style={{ flex:1 }}>
          <Text >{longText}</Text>
          </View>
        </View>
       </View>
    );
  }
});

var styles = StyleSheet.create({
    container: {
    padding: 30,
    marginTop: 65,
    flexWrap: 'wrap',
    flex:1
    },
  alignCenter: {
    alignItems: 'center'
  }
})

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Answer 3

使用flex属性。例如。