alignItems:center防止React Native中的弹性行文本换行

alignItems: center prevents flex row text wrapping in React Native

本文关键字：文本 换行 center 防止 React Native alignItems      更新时间：2023-09-26

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

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

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

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

  1. 行元素，不占用屏幕的整个宽度，
  2. 中心
  3. 里面有很长的文字，
  4. 哪些包装？

谢谢。

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

我们在我的公司遇到了同样的问题，据我所知，没有非黑客的方法可以解决这个问题。

我们处理它的方法是从主容器中完全删除 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);

一直在自己搜索以解决此问题：

textStyle: {
    textAlign: 'center',
}

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

摆脱直接父级中的任何alignItems，让flexWrap发生。

我发现我必须做的比@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',
  },
});

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

相关文章：