React Native 中如何防止文本溢出屏幕？-css教程-PHP中文网

React Native 中如何防止文本溢出屏幕？

Linda Hamilton

发布： 2024-11-01 20:48:02

原创

645 人浏览过

How to Prevent Text Overflowing the Screen in React Native?

React Native 中的文本溢出屏幕：解决换行问题

所提供的代码展示了一个 React Native 元素，其中包含超出范围的大量文本内容屏幕的边界。目标是将文本限制在屏幕中间，同时保持 80% 的动态宽度。

解决方案：

要解决此问题，请进行以下修改可以对代码进行：

从 descriptionContainerHor 样式中删除宽度属性：之前尝试使用 flex: 0.3 操作宽度会导致不同屏幕尺寸上的问题。建议将其删除以实现动态宽度。
将 flexShrink: 1 添加到 descriptionText 样式：此 CSS 属性允许文本在必要时收缩，确保它适合可用空间。
重新排列父容器：将 descriptionContainerVer 和 descriptionContainerVer2 视图包装在弹性行父级中。这可确保它们水平对齐，解决对齐问题。

更新的代码片段：

<code class="javascript">...
var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    flex: 1,  //no width specified
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap',
    flexShrink: 1  //allow text to shrink if necessary
  }
});
...

<View style={styles.container}>

        <View style={{flexDirection: 'row'}}>
          <View style={styles.descriptionContainerVer}>
            <View style={styles.descriptionContainerHor}>
              <Text style={styles.descriptionText} numberOfLines={5}>
                Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
              </Text>
            </View>
          </View>

          <View style={styles.descriptionContainerVer2}>
            <View style={styles.descriptionContainerHor}>
              <Text style={styles.descriptionText} numberOfLines={5}>Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
            </View>
          </View>
        </View>

</View>
...</code>

登录后复制

这些修改将有效防止文本超出范围屏幕并确保其限制在所需的边界内，同时保持动态宽度。

以上是React Native 中如何防止文本溢出屏幕？的详细内容。更多信息请关注PHP中文网其他相关文章！