alignItems: center属性可以防止React Native中flex行文本换行。

Question

由于某种原因，在容器视图的样式中设置alignItems: center会导致弹性行内的文本停止换行，并且不遵守容器视图的padding。

工作示例和代码在这里：https://rnplay.org/apps/FsDXuQ 我尝试了按照建议设置flexDirection为column，使用flex: 1或flexWrap，但唯一可行的方法是从容器视图中删除alignItems: center。

我不明白这里发生了什么。如果我想要：

1. 占用屏幕宽度不足的行元素
2. 居中对齐
3. 其中包含长文本
4. 并且自动换行？

谢谢。

- Lane Rettig

---

请在您的问题中[编辑]以包含一个[MCVE]。这将有助于Stack Overflow社区澄清问题，并在您链接的示例离线时保留问题的完整性。 - Mogsdad

Answer 1

使用 flex 属性。例如：<Text style={{ flex: 1}}>。

- Apache

Answer 2

我们在公司也遇到了同样的问题，据我所知，没有非常规的解决方法。

我们的处理方式是完全删除主容器中的alignItems属性，并给容器添加flex:1属性。然后，我们使用alignItems: 'center'来修饰任何需要的子组件，而不会将样式传递给所有子组件。

我已经设置了一个示例，您可以在这里查看，并将代码粘贴如下。

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

- Nader Dabit

---

谢谢。我同意在特定情况下这个方法是可行的，但我认为它并不能完全解决我提出的问题：如果您想在视图中使文本元素居中，并且您希望文本自动换行。除非我漏了什么，否则似乎不可能实现这一点。示例：https://rnplay.org/apps/NVZPwQ - Lane Rettig

Answer 3

我一直在寻找解决方法：

textStyle: {
    textAlign: 'center',
}

本文由以下文章翻译而来：http://moduscreate.com/aligning-children-using-flexbox-in-react-native/

移除直接父元素中的任何 alignItems 属性，以允许 flexWrap 属性生效。

- trik

Answer 4

我发现我需要做的事情比@trik所示的要多一些。

我还需要从容器（父组件）中移除alignItems: 'center'。

我还发现，如果我需要容器使用alignItems: 'center'，那么我必须将子组件的宽度设置得足够大，以容纳文本，并且使用textAlign: 'center'。

这将使用类似以下样式：

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
  centeredParent: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  centeredChild: {
    width: '100%',
    textAlign: 'center',
  },
});

奖励提示：如果将文本组件的背景设置为对比色，则可以看到文本组件的框。这样可以更容易地调试这些问题。

- Danny Remington - OMS