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

Posted

技术标签:

【中文标题】alignItems: center 防止 React Native 中的 flex 行文本换行【英文标题】:alignItems: center prevents flex row text wrapping in React Native 【发布时间】:2016-05-31 05:34:08 【问题描述】:

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

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

我尝试遵循set flexDirection to column、use flex: 1 or flexWrap 的建议,但唯一可行的方法是从容器视图中删除 alignItems: center

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

    不占据整个屏幕宽度的行元素, 居中, 里面有很长的文字, 哪个包装?

谢谢。

【问题讨论】:

请edit 在您的问题中包含minimal reproducible example 在问题本身中。 这将通过澄清问题来帮助 Stack Overflow 社区,并且如果/当您链接的示例离线。 【参考方案1】:

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

【讨论】:

【参考方案2】:

我们在我的公司也遇到了同样的问题,据我所知,没有任何非破解方法可以解决。

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

【讨论】:

谢谢。我同意在特定情况下这是可行的,但我认为它并不能完全解决我提出的问题:如果您希望文本元素在视图中居中,并且您希望文本裹。这似乎是不可能的,除非我错过了什么。示例:rnplay.org/apps/NVZPwQ【参考方案3】:

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

textStyle: 
    textAlign: 'center',

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

删除直接父母中的任何 alignItems 以允许 flexWrap 发生。

【讨论】:

以上是关于alignItems: center 防止 React Native 中的 flex 行文本换行的主要内容,如果未能解决你的问题,请参考以下文章

HarmonyOS鸿蒙学习笔记(11)Flex组件alignItems属性说明

HarmonyOS鸿蒙学习笔记(11)Flex组件alignItems属性说明

flex布局时,设置alignItem属性导致元素不显示的问题探究

React页面布局技巧

如何使 TextField 输入更宽?

如何将图像从JSON文件放到React Native Js页面