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

mwyxok5s  于 2023-08-07  发布在  React
关注(0)|答案(4)|浏览(184)

出于某种原因,在容器视图的样式中设置alignItems: center会导致flex行中的文本停止换行,并且不遵守容器视图的padding
示例和代码如下:https://rnplay.org/apps/FsDXuQ
我试着按照set flexDirection to columnuse flex: 1 or flexWrap的建议,但唯一有效的是从容器视图中删除alignItems: center
我不明白这是怎么回事。如果我想要:
1.行元素,它们不会占据屏幕的整个宽度,
1.居中
1.里面有很长的文字
1.哪个 Package ?

  • 谢谢-谢谢
rur96b6h

rur96b6h1#

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

mspsb9vt

mspsb9vt2#

我们在我的公司遇到了同样的问题,据我所知,没有非黑客的方法。
我们处理它的方式是从主容器中完全删除alignItems属性,并为容器提供一个flex:1属性。然后我们使用alignItems:'center'到我们需要的任何子组件,而不会将样式传播到所有子组件。
我已经建立了一个关于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);

字符串

ldfqzlk8

ldfqzlk83#

我一直在寻找自己的方法来解决这个问题:

textStyle: {
    textAlign: 'center',
}

字符串
这篇文章的礼貌:http://moduscreate.com/aligning-children-using-flexbox-in-react-native/
删除直接父节点中的任何alignItems,以允许flexWrap发生。

fwzugrvs

fwzugrvs4#

我发现我必须做的比@trik指示的多一点。
我还删除了alignItems:从容器(父组件)中“中心”。
我还发现,如果我需要容器使用alignItems:'center',然后我必须设置我的子组件的宽度足够大,以容纳文本以及使用textAlign:中心
这将使用类似于以下的样式:

import {StyleSheet} from 'react-native';

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

字符串

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

相关问题