RN Text 组件遇到中文字符换行排版异常

最新推荐文章于 2022-10-17 21:05:39 发布
原创 最新推荐文章于 2022-10-17 21:05:39 发布 · 5.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react native

RN开发时遇到一个很奇怪的bug，Text组件换行的时候始终不会填满宽度再换行，试过了Text组件的所有API都不生效，搜索的时候看到这个文章 这里

Android的TextView在显示文字的时候，如果有段中文有英文，有中文，有中文标点符号，你会发现，当要换行的时候遇到中文标点，
这一行就会空出很多空格出来。原因是：
1） TextView在显示中文的时候 标点符号不能显示在一行的行首和行尾，如果一个标点符号刚好在一行的行尾，该标点符号就会连同前一个字符跳到下一行显示；
2）一个英文单词不能被显示在两行中（ TextView在显示英文时，标点符号是可以放在行尾的，但英文单词也不能分开 ）；
3）全角和半角的问题，汉字无论全角还是半角都是占2个字节，英文和符号在半角是占一个字节，全角是占两个字节

我想这个文本是服务器取回来的,文本后面有中文句号，是不是中文标点的问题呢，于是尝试在标签后加入{"\t"}

<Text style={{ textAlign:"left",paddingLeft:10,paddingRight:10 , width:width,backgroundColor: "white",flex:1, marginTop: 2, fontSize: 12, justifyContent:"center",alignItems: "center",  color: "#f34e56" }}>{this.state.content_date} {this.state.content_new}{"\t"}</Text>

成功了
mark一下以免遗忘

RN 多行换行布局
majiakun1的专栏
10-12 5547
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; export default class TFlex extends Component { render() { return ( V
运维面试题
热门推荐
weixin_42690304的博客
09-18 2万+
运维面试题 NETWORK 1 请描述TCP/IP协议中主机与主机之间通信的三要素 参考答案 IP地址（IP address） 子网掩码（subnet mask） IP路由（IP router） 2 请描述IP地址的分类及每一类的范围 参考答案 A类1-26 B类128-191 C类192-223 D类224-239组播(多播) E类240-254科研 3 请描述A、B...
React Native 下，TextInput 换行。
qq_34823218的博客
05-17 3391
在RN版本0.44，长文本编辑，使用TextInput。 出现以下问题： 1：点击软键盘中“回车”按钮，软键盘隐藏。 2：设置blurOnSubmit={false}，点击软键盘中“回车”按钮，没有换行。 3：TextInput设置高度，文字默认是居中显示。设置高度自增长，有闪烁。 根据问题来一步步解决 实现效果 1：点击软键盘中“回车”按钮，软键盘隐藏。 blurOnSubmit 强制设为 false 、 2：设置blurOnSubmit={false}，点击软键盘中“回车”按钮，没有换行。
php fwrite写入txt文件的时候用 \r\n不能换行
KylinBL的专栏
11-02 3559
今天遇到了一个问题就是用fwrite写入txt文件的时候用 rn不能换行 试了很久都没找到办法! 突然之间想到一个东东以前看书见过后来还是用这个东东给解决了! 现在写出来预防将来忘记也希望能帮到需要帮助的朋友! 直接看代码: <?php $stream = fopen("robots.txt", "w+"); fwrite($stream, "你换行了吗\r\n我已经换行了!"); ?>
TextView 自动换行,每行排满的自定义TextView
fengyeNom1的博客
08-08 2786
效果图是下面的，而用传统的Textview不行 实际上用TextView 直接自定义TextView,上代码： package com.madreian.hulk.view; import java.lang.ref.SoftReference; import java.util.ArrayList; import java.util.Arrays; import java.u...
RN基础组件1 —— Text
hdj0511的博客
10-17 415
RN基础组件1 —— Text
java换行rn_React Native Text控件动态检测换行的方法
weixin_39575937的博客
02-24 613
Text控件是React Native最常用的几个控件之一了，因为几乎没有哪个应用不使用文案展示功能的。在展示文案时，我们常常需要限定Text显示区域的宽度，而文本出现超长时，要么选择截断，要么选择换行。当选择换行时，我们要对换行做出一些响应，比如我们需要因此调整所在容器的高度等。本文就演示一下如何动态检测Text控件出现了换行。单个Text，无嵌套的情况参照以下步骤：设置numberOfLine...
RN的<Text>多余文字显示省略号
风雨飘飘飘啊飘的博客
05-09 1929
<Text numberOfLines={2} ellipsizeMode={'tail'} >文字文字文字文字文字文字</Text> 其中的numberOfLines是文字需要显示的行数，设置***ellipsizeMode={‘tail’}***以后多出部分会显示省略号 若有疑问，可留言！ 如有帮助，可给请作者的一杯咖啡添砖加瓦： ...
react native text换行_React系列二 核心JSX语法一
weixin_39755890的博客
12-12 1861
一. ES6的class 虽然目前React开发模式中更加流行hooks，但是依然有很多的项目依然是使用类组件(包括AntDesign库中)；但是有很多的同学对ES6中的类不太熟悉，所以这里我还是补充一下；1.1. 类的定义在ES6之前，我们通过function来定义类，但是这种模式一直被很多从其他编程语言(比如Java、C++、OC等等)转到JavaScript的人所不适应。原因是，大...
java换行rn_ReactNative 布局自动换行的实现
weixin_36486455的博客
02-24 610
核心思想：基于row布局的wrap属性实现自动换行WorkStatusViewStyles = StyleSheet.create({//基于flex-box布局container: {width: width,flexDirection: 'column',flexWrap: 'wrap',backgroundColor: '#dd0ff0',alignItems: 'flex-start',j...
windows permission denied怎么解决_text文件不能显示换行符的原因及解决方法
weixin_39943750的博客
12-12 728
昨天发现，手机上的一个text文件，转到电脑上之后，竟然没有换行符。用Windows默认的记事本打开text文件后，所有内容，都连接成一片。当然，这个不是指text显示格式中的“自动换行”。而是指，所有内容，都没有分段。一个段落写完了，总是要回车，另起一行写另外的内容。这个换行符，竟然不能正常显示。所有内容都在一个段落里。这是什么原因，又该怎么解决呢？这是因为不同的系统，换行符不一样，代码不兼容。...
React Native Android 下，TextInput 换行。
孑书力的博客
02-08 7674
在RN版本0.44，长文本编辑，使用TextInput。 出现以下问题： 1：点击软键盘中“回车”按钮，软键盘隐藏。 2：设置blurOnSubmit={false}，点击软键盘中“回车”按钮，没有换行。 3：TextInput设置高度，文字默认是居中显示。设置高度自增长，有闪烁。 根据问题来一步步解决 实现效果 1：点击软键盘中“回车”按钮，软键盘隐藏。 ...
react native text换行_从React-Native坑中爬出，我记下了这些
weixin_39644611的博客
11-29 1541
上一篇文章彭湖湾：当React开发者初次走进React-Native的世界​zhuanlan.zhihu.com前言最近因为业务需要，做了一些关于React-Native方面的开发，对一些自己遇到的问题做了记录。总共 21 条要点记录，承接于上一篇文章本文讲的很多问题，不一定是对的，但确实是自己觉得可以引起一定的注意。因为也是刚开始了解，很多都不确定是否是最佳实践，还请各位前辈多多指教。1.对于背...
React 字符串自动换行展示
my_wings的博客
07-10 5111
<span style={{whiteSpace:‘pre-line’}}>{log}
flex text换行
angellove156的专栏
05-10 3591
flex中字符换行存在两种情况，要区别对待 1.在MXML中，要用    eg:       text="派车提醒：0102 用车时间：2012-5-2 15:30 Ntt.cc was created br Minidxer in January of 2008 as a site dedicated to the prolification of
react native text换行_邂逅React
weixin_39636176的博客
12-19 773
一 、React产生的原因官方对它的解释：用于构建用户界面的 JavaScript 库React是FaceBook在2013年开源的框架1.2 使用原生开发产生的问题需要去处理兼容性的问题，这是十分麻烦的，而且过多兼容性代码会导致代码的冗余既要界面中的数据和交互，又需要频繁的去处理页面中的dom，十分的繁琐，且过多的重绘和回流(Reflow & Repaint)会减低页面的性能数...
react native text换行_React-Native之图标使用（react-native-vector-icons）
weixin_39920338的博客
12-19 222
在React-Native开发中少不了使用图标，接下来看看怎样在项目中使用图标项目图标地址：React-native-vector-icons图标github地址​github.com你可以看文档，也可以看这篇文章都可以完成使用设置(仅供android参考，ios请移步上面文档)> 1. 安装react-native-vector-icons图标库 yarn add react-native...
react-native Text 文字垂直居中
hzxOnlineOk的博客
08-07 3349
import {Platform} from 'react-native'; label: { fontSize: OASize(11), color: OAColor.descText, height: OASize(20), textAlign: 'center', textAlignVertical: 'center', ...Platform.select({ ios: { lineHeight: OASize(20) }, .
RN Text组件 FlexDirection row 父组件
最新发布
08-10
<think>我们正在讨论的是在React Native中，当父容器使用`flexDirection: 'row'`时，如何布局内部的Text组件。根据用户的问题，核心是Text组件在行布局中的表现。 关键点： 1. 父容器设置`flexDirection: 'row'`，意味着其直接子元素会沿着水平方向排列。 2. Text组件作为子元素，将按照行排列的方向（从左到右）依次排列。 3. 注意Text组件默认的样式行为：它们不会换行（除非设置`flexWrap`），并且它们的高度由内容决定。 步骤： 1. 创建父容器，设置`flexDirection: 'row'`。 2. 在父容器内放置多个Text组件。 3. 考虑Text组件的样式，比如设置背景色、边距等以便观察。 示例代码： ```jsx import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const TextRowLayout = () => { return ( <View style={styles.container}> <Text style={styles.text}>文本1</Text> <Text style={styles.text}>文本2</Text> <Text style={styles.text}>较长的文本3，用于测试布局</Text> </View> ); }; const styles = StyleSheet.create({ container: { flexDirection: 'row', // 水平排列子元素 backgroundColor: '#e0e0e0', padding: 10, // 如果一行放不下，默认会压缩，不会换行。如果需要换行，可以设置flexWrap: 'wrap' }, text: { backgroundColor: '#bbdefb', // 背景色方便观察每个Text的边界 margin: 5, padding: 5, // 注意：Text组件默认不会换行，如果文字过长可能会被截断或者压缩（取决于父容器的设置） // 如果需要换行，可以在Text组件上设置flexShrink:1或者设置固定宽度 } }); export default TextRowLayout; ``` 说明： 1. 父容器（View）设置为`flexDirection: 'row'`，三个Text组件将水平排列。 2. 如果文本内容较短，则每个Text组件会根据自己的内容宽度显示，高度由内容决定（父容器高度由最高的子元素决定）。 3. 如果文本内容过长，可能会出现以下情况： - 默认情况下，Text组件不会换行，所以文本可能会被截断（显示省略号）或者压缩（如果父容器宽度不够且没有设置换行）。 - 如果需要换行，可以在Text组件上设置`flexWrap: 'wrap'`？注意：`flexWrap`是容器属性，不能直接用在Text上。所以我们可以这样处理： - 方案一：给每个Text设置一个宽度（固定值或百分比）或者`flexShrink: 1`（允许缩小），这样Text内部会自动换行。 - 方案二：如果希望整个容器在放不下时换行，那么父容器需要设置`flexWrap: 'wrap'`，同时注意父容器的高度需要能够容纳多行（比如设置高度为auto或者不设置高度由内容撑开）。但是注意：`flexWrap: 'wrap'`会使整个子元素换行，而不是单个Text内部的文字换行。 实际上，Text组件内部的文字换行是由Text组件自身的样式控制的。我们可以设置Text的宽度，或者使用`flexShrink:1`来允许Text组件在空间不足时缩小，同时文本会自动换行（因为Text组件默认是允许换行的，除非设置了`numberOfLines`限制行数）。 修改后的Text样式（允许文本换行）： ```jsx text: { backgroundColor: '#bbdefb', margin: 5, padding: 5, flexShrink: 1, // 允许在空间不足时缩小，同时文本会自动换行 // 或者设置一个具体的宽度，比如 width: 100 } ``` 但是注意：如果父容器没有设置换行（即`flexWrap: 'wrap'`），那么即使Text设置了`flexShrink:1`，它们也会被压缩在一行内（每个Text的宽度被压缩），然后文本会在Text组件内部换行。如果父容器设置了`flexWrap: 'wrap'`，那么当一行放不下所有子元素时，整个子元素会换到下一行。 因此，根据需求选择： - 如果希望所有Text都在同一行，并且过长的文本在Text组件内部换行（多行文本），则给Text设置`flexShrink:1`（或者固定宽度）即可，父容器不需要设置`flexWrap`。 - 如果希望每个Text组件作为一个整体，当一行放不下时整体换行，则父容器设置`flexWrap: 'wrap'`，同时每个Text组件可以设置宽度（比如`width: '30%'`）或者不设置（由内容决定宽度，但这样可能导致换行后空间浪费）。 示例：父容器换行 ```jsx container: { flexDirection: 'row', flexWrap: 'wrap', // 允许子元素换行 backgroundColor: '#e0e0e0', padding: 10, }, text: { backgroundColor: '#bbdefb', margin: 5, padding: 5, // 可以设置一个宽度，以便控制每行显示几个 // width: '30%' } ``` 总结： 1. 父容器使用`flexDirection: 'row'`实现水平排列。 2. 处理Text组件过长的情况有两种思路：Text内部换行（通过设置Text的`flexShrink`或固定宽度）和整体换行（父容器设置`flexWrap: 'wrap'`）。 3. 根据实际需求选择合适的方式。 引用说明： 根据引用[1]和[2]，我们使用了容器属性`flexDirection`和`flexWrap`，这些是Flexbox布局中控制容器的重要属性[^1][^2]。 根据引用[3]，React Native使用FlexBox作为默认布局系统，所以我们使用Flexbox属性来布局[^3]。</think>在 React Native 中，当父容器使用 `flexDirection: 'row'` 布局时，Text 组件会作为行内元素水平排列。以下是具体实现方法和注意事项： ### 实现步骤 1. **设置父容器为行布局** ```jsx <View style={{ flexDirection: 'row' }}> <Text>文本1</Text> <Text>文本2</Text> </View> ``` 2. **处理文本对齐问题** ```jsx <View style={{ flexDirection: 'row', alignItems: 'center' // 垂直居中 }}> <Text>文本1</Text> <Text>文本2</Text> </View> ``` 3. **控制文本换行** ```jsx <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}> <Text style={{ flexShrink: 1 }}>长文本内容...</Text> </View> ``` ### 完整示例 ```jsx import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const TextRowLayout = () => ( <View style={styles.container}> <View style={styles.rowContainer}> <Text style={styles.text}>左侧文本</Text> <Text style={[styles.text, styles.highlight]}>高亮文本</Text> <Text style={styles.text}>右侧文本</Text> </View> </View> ); const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5' }, rowContainer: { flexDirection: 'row', // 关键：水平排列 justifyContent: 'space-between', // 两端对齐 alignItems: 'center', // 垂直居中 backgroundColor: 'white', padding: 15, borderRadius: 8, borderWidth: 1, borderColor: '#e0e0e0' }, text: { fontSize: 16, color: '#333' }, highlight: { fontWeight: 'bold', color: '#e91e63' } }); export default TextRowLayout; ``` ### 关键注意事项 1. **文本截断问题** - 使用 `numberOfLines` 控制显示行数 ```jsx <Text numberOfLines={1} ellipsizeMode="tail">长文本...</Text> ``` 2. **尺寸自适应** - 使用 `flexShrink` 允许文本收缩 ```jsx <Text style={{ flexShrink: 1 }}>自适应文本...</Text> ``` 3. **垂直对齐** - 父容器设置 `alignItems: 'center'` 确保所有文本垂直居中 - 单个文本特殊对齐：`alignSelf: 'flex-start'` 4. **间距控制** ```jsx <View style={{ flexDirection: 'row', gap: 10 }}> <Text>文本1</Text> <Text>文本2</Text> </View> ``` ### 常见问题解决 1. **文本不换行**： ```jsx <Text style={{ flexWrap: 'wrap', flex: 1 }}>长文本...</Text> ``` 2. **高度不一致**： ```jsx <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}> <Text>不同高度的文本...</Text> </View> ``` 3. **超出容器宽度**： ```jsx <ScrollView horizontal={true}> <View style={{ flexDirection: 'row' }}> <Text>很长的文本内容...</Text> </View> </ScrollView> ``` > 关键点：Text 组件在 `flexDirection: 'row'` 布局中默认作为行内块元素处理，其尺寸由内容决定。通过合理使用 Flexbox 属性，可以实现各种复杂文本布局[^1][^2][^3]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值