如何计算文本的字符长度？
如何计算文本的字符长度？
提问于 2021-04-15 19:58:15
我已经为显示文本定制了一个“阅读更多”组件。
这个想法是，当文本超过2行时，就会出现“更多的阅读”，并折叠剩下的内容。当点击“阅读更多"，你将能够看到所有的内容，并出现”阅读较少“的注意力。
我很高兴它能起作用，直到我发现了一个问题，那就是当文本只有一个句子时，它仍然会出现“阅读更多”的注意，这是没有意义的。我不知道如何解决这个问题，...Could，请看一下我的代码，非常感谢！
“阅读更多”部分：
import React,{useState} from 'react';
import { StyleSheet, Text, View } from 'react-native'
import colors from '../config/colors';
function ReadMore({txt_content,num_lines}) {
const [read,setRead] =useState(false);
const[text,setText] = useState(num_lines);
const[read_less,set_read_less] =useState(false);
return (
<View style={styles.container}>
<Text
style={styles.txt}
numberOfLines = {text}
>{txt_content}</Text>
<View style={styles.read_container}>
{!read&&<Text style={styles.read_more}onPress = {()=>{setText(null);setRead(true);set_read_less(true)}}>Read More</Text> }
{read_less&&<Text style={styles.read_more}onPress = {()=>{setText(2);set_read_less(false);setRead(false)}}>Read Less</Text>}
</View>
</View>
);
}
const styles = StyleSheet.create({
container : {
flex : 1,
},
read_container : {
flex :1,
alignItems : 'center',
padding : 5,
},
txt : {
fontSize : 16,
color : colors.medium,
textAlign : 'center',
},
read_more : {
color : colors.primary,
fontSize : 16,
},
})
export default ReadMore;如果txt_content.length小于14，就不会出现“读得多”或“读少”的标签.但我不知道该怎么做..。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-15 20:04:10
- 将您的值设置为空字符串。
- 在您的初始视图中，创建一个TextInput字段。
- 应用所需的道具
- 应用“onChangeText”支柱。
- 创建一个“Text”字段TextInput，并让它计算值的长度。
H 210G 211
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class CharacterCounter extends React.Component {
constructor(props) {
super(props);
this.state = {
value:''
};
}
render(){
return(
<View>
<TextInput
multiline = {true}
numberOfLines = {6}
maxLength = {130}
placeholder='I am Jahnavi Sananse'
value={this.state.value}
onChangeText={(value) => this.setState({value})}
/>
<Text>
Characters Left:{this.state.value.length}/130
</Text>
</View>
)
}
}
Stack Overflow用户
发布于 2021-04-15 21:35:58
有了贾纳维·萨南斯的提示，我终于有了一个解决办法：
import React,{useState} from 'react';
import { StyleSheet, Text, View } from 'react-native'
import colors from '../config/colors';
function ReadMore({txt_content="",num_lines}) {
const [read,setRead] =useState(false);
const[text,setText] = useState(num_lines);
const[read_less,set_read_less] =useState(false);
const num_txt = txt_content.length;
return (
<View style={styles.container}>
<Text
style={styles.txt}
numberOfLines = {text}
>{txt_content}</Text>
{(num_txt>=70)&&(
<View style={styles.read_container}>
{!read&&<Text style={styles.read_more}onPress = {()=>{setText(null);setRead(true);set_read_less(true)}}>Read More</Text> }
{read_less&&<Text style={styles.read_more}onPress = {()=>{setText(2);set_read_less(false);setRead(false)}}>Read Less</Text>}
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container : {
flex : 1,
},
read_container : {
flex :1,
alignItems : 'center',
padding : 5,
},
txt : {
fontSize : 16,
color : colors.medium,
textAlign : 'center',
},
read_more : {
color : colors.primary,
fontSize : 16,
},
})
export default ReadMore;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67115270
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号