时间戳

首页 > 解决方案 > React Native如何计算文本的字符长度？

react-native - React Native如何计算文本的字符长度？

问题描述

我已经定制了一个“阅读更多”组件来显示文本。

这个想法是当文本超过 2 行时，将出现“阅读更多”并折叠其余内容。当点击“阅读全文”时，您将能够看到所有内容并出现“阅读少”的关注。

我很高兴它可以工作，直到我发现一个问题是当文本少了一个句子时，它仍然会出现“阅读更多”的关注，这没有意义..我不知道如何解决这个问题...请您看一下我的代码，非常感谢！

“阅读更多”组件：

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，那么“阅读更多”或“少读”标签都不会出现，这将是很棒的......但我不知道如何让它工作......

标签： react-native

解决方案

  1. 将您的值设置为空字符串。
  2. 在您的初始视图中，创建一个 TextInput 字段。
  3. 应用所需的道具
  4. 应用“onChangeText”道具。
  5. 创建一个“文本”字段 TextInput 并让它计算您的值的长度。

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>
    )
  }
}

推荐阅读