alignItems：center阻止React Native中的flex行文本换行

3 回答

• 0

  一直在寻找我自己来解决这个问题：

  textStyle: {
      textAlign: 'center',
  }
  

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

  摆脱直接父母中的任何 alignItems 以允许flexWrap发生 .

  回复于 2024-05-06T12:03:34+08:00
• 5

  使用 flex 属性 . 防爆 . <Text style={{ flex: 1}}>

  回复于 2024-05-06T12:03:34+08:00
• 2

  我们在我的公司遇到了同样的问题，据我所知，没有非恶意的方法 .

  我们处理它的方法是从主容器中完全删除alignItems属性，并为容器赋予flex：1属性 . 然后我们使用alignItems：'center'到我们需要的任何子组件，而不将样式传播到所有子组件 .

  我've set up an example of what I'm正在谈论here，并粘贴下面的代码 .

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

  回复于 2024-05-06T12:03:34+08:00