老师，求助

来源：1-1 课前必读（不看会错过一个亿）

慕尼黑0536602

2021-04-16

嗨老师，
我做了一个Read More的Component ,用于展示文字，当文字超过2行的时候，显示省略号+“Read more”的标识；当点击“Read more ”之后，会展开全部。现在有个问题，就是当文字少于2两行的时候，我需要去除“Read more”这和标识。。但是我试了好多种方法都去不掉。能麻烦帮我看下代码吗？谢谢你。
这是ReadMore的component :(txt_content:为需要展示的文字；num_lines:限制展示行数)

import React,{useState} from 'react';
import { StyleSheet, Text, TextInput, 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}>
           <TextInput
           style={styles.txt}
           numberOfLines = {text}
           >{txt_content}</TextInput>


           <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;

图片描述

写回答

1回答

慕尼黑0536602

提问者

2021-04-16

我试了很久，还是硬生生给整出来来，解决方案如下，分享给大家，以后如果有需要的同学可以参考：

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;

慕尼黑0536602

CrazyCodeBoy

谢谢老师！！

2021-04-16

共2条回复

RN入门到进阶，打造高质量上线App

解锁React Native开发应用新姿势，React Native新版本热门技术

3144 学习 · 3241 问题

查看课程

相似问题

老师，求助

回答 1