如何在React-Naitve（Javascript）中显示更多/更少文本

Question

我正在开发本机应用程序。这样，我们在文本上显示了一些描述，可能是行数。

因此，如果数据多于3行，则如果扩展则必须显示更多和更少。

        <FlatList
          style={styles.faltList}
          showsVerticalScrollIndicator
          data={data}
          extraData={this.state}
          renderItem={({ item, index }) => (
            <View style={styles.flatListCell}>
                <Text style={styles.description}>{item.description}</Text>
              </View>
            </View>
          )
          }
          ItemSeparatorComponent={() => (
            <View style={{ height: 10}} />
          )}
        />

我找到了 react-native-view-more-text 库，但是我想通过自定义代码来实现它。

注意：我正在“平面清单”中显示该文本。

有什么建议吗？

Answer 1

我以这种方式尝试过，希望对您和其他人有帮助！

const postTextContent = (props) => {
const [textShown, setTextShown] = useState(false); //To show ur remaining Text
const [lengthMore,setLengthMore] = useState(false); //to show the "Read more & Less Line"
const toggleNumberOfLines = () => { //To toggle the show text or hide it
    setTextShown(!textShown);
}

const onTextLayout = useCallback(e =>{
    setLengthMore(e.nativeEvent.lines.length >=4); //to check the text is more than 4 lines or not
    // console.log(e.nativeEvent);
},[]);
    
  return (
      <View style={styles.mainContainer}>
          <Text
              onTextLayout={onTextLayout}
              numberOfLines={textShown ? undefined : 4}
              style={{ lineHeight: 21 }}>{Your Long Text}</Text>

              {
                  lengthMore ? <Text
                  onPress={toggleNumberOfLines}
                  style={{ lineHeight: 21, marginTop: 10 }}>{textShown ? 'Read less...' : 'Read more...'}</Text>
                  :null
              }
      </View>
  )
}

Answer 2

您可以简单地使用function processCopyFile() { console.log("processCopyFile"); window.resolveLocalFileSystemURL ( cordova.file.externalRootDirectory + "NEW_output", getDirectoryWin, fail1 ); } function getDirectoryWin(dirEntry) { console.log("getDirectoryWin"); window.resolveLocalFileSystemURL ( cordova.file.externalRootDirectory + "NEW_backup", function(dirEntry2) { dirEntry.copyTo(dirEntry2, "backup1", function(){ alert('success'); }, fail1); }, fail1 ); } 道具numberOfLines：

  

用于在计算文本后用省略号截断文本   布局，包括换行，这样总行数   不超过此数字。

很显然，有足够的逻辑处理程序可以在您的<Text>中保存显示的文本和被截断的文本。

让我们看看我刚刚创建的示例：

state

在这里，我使用state = { textShown: -1, }; toggleNumberOfLines = index => { this.setState({ textShown: this.state.textShown === index ? -1 : index, }); }; render() { return ( <View style={styles.container}> <FlatList data={[ { key: 'a', description: longText }, { key: 'b', description: longText }, { key: 'c', description: longText }, ]} renderItem={({ item, index }) => ( <View style={styles.flatListCell}> <Text numberOfLines={this.state.textShown === index ? undefined : 3} style={styles.description}> {longText} </Text> <Text onPress={() => this.toggleNumberOfLines(index)} style={{ color: 'red' }}> {this.state.textShown === index ? 'read less...' : 'read more...'} </Text> </View> )} /> </View> ); } 将元素的索引保存在显示的state中。如果未显示任何内容，则保存的值为-1。

您可以尝试用this小吃来尝试其行为，（希望如此）可以重现您的情况。 让我知道这是否是您想要的。 （嗨，Anilkumar，我们已经见过：））

Answer 3

第一个实现已关闭，但问题在于，当文本等于3行时，“更多阅读”按钮将显示，但不应再显示，因为没有更多文本。我通过更新状态行数以及检查文本是否已显示来修复它。

const ReadMoreText = ({ readMoreStyle, text, textStyle }) => {
  const [showMoreButton, setShowMoreButton] = useState(false);
  const [textShown, setTextShown] = useState(false);
  const [numLines, setNumLines] = useState(undefined);

  const toggleTextShown = () => {
    setTextShown(!textShown);
  };

  useEffect(() => {
    setNumLines(textShown ? undefined : 3);
  }, [textShown]);

  const onTextLayout = useCallback(
    (e) => {
      if (e.nativeEvent.lines.length > 3 && !textShown) {
        setShowMoreButton(true);
        setNumLines(3);
      }
    },
    [textShown],
  );

  return (
    <>
      <Text onTextLayout={onTextLayout} numberOfLines={numLines} style={textStyle} ellipsizeMode="tail">
        {text}
      </Text>

      {showMoreButton ? (
        <Text onPress={toggleTextShown} style={readMoreStyle}>
          {textShown ? 'Read Less' : 'Read More'}
        </Text>
      ) : null}
    </>
  );
};

Answer 4

import React from 'react';
import PropTypes from 'prop-types';
import AnchorText from '../AnchorText';

import { StyledContainer, RegularText } from './styles';

export default class Description extends React.Component {
      constructor(props) {
super(props);
this.state = {
  showMore: true,
};
}

 onClick = () => {
this.setState({
  showMore: false,
});
};

 render() {
const { description } = this.props;
const { showMore } = this.state;
if (!description) return null;

return (
  <StyledContainer FD={'column'}>
    {showMore ? (
      <RegularText MT={1}>
        {description.slice(0, 150)}{' '}
        {description.length > 150 && (
          <AnchorText onClick={this.onClick} label=" .. Read more" />
        )}{' '}
      </RegularText>
    ) : (
        <RegularText MT={1}>{description}</RegularText>
    )}
  </StyledContainer>
);
 }
} 

Description.propTypes = {
 description: PropTypes.string,
 };

签出此小部件

Answer 5

看看我的解决方案，我没有使用文本行，而是使用了文本长度。

import React, {useState} from 'react';
import {Text, View, Image, TouchableOpacity, StyleSheet} from 'react-native';

const PostContent = () => {
  const postDescription =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
  const [showMore, setShowMore] = useState(false);

  return (
    <View style={styles.postContentContainer}>
      {postDescription.length > 120 ? (
        showMore ? (
          <TouchableOpacity onPress={() => setShowMore(!showMore)}>
            <Text style={styles.postDescription}>{postDescription}</Text>
            <Text style={styles.seeMore}>Show less</Text>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity onPress={() => setShowMore(!showMore)}>
            <Text style={styles.postDescription}>
              {`${postDescription.slice(0, 120)}... `}
            </Text>
            <Text style={styles.seeMore}>Show more</Text>
          </TouchableOpacity>
        )
      ) : (
        <Text style={styles.postDescription}>{postDescription}</Text>
      )}
    </View>
  );
};

export default PostContent;

const styles = StyleSheet.create({
  postContentContainer: {
    // borderWidth: 1,
    // borderColor: 'red',
    flexDirection: 'column',
  },

  postMedia: {
    //borderWidth: 1,
    //borderColor: 'red',
    width: '100%',
    height: 280,
    resizeMode: 'cover',
  },

  postDescription: {
    paddingTop: 15,
    paddingHorizontal: 15,
    color: colors.text.black,
    fontFamily: fonts.family.body,
    fontSize: fonts.fontSizes.button,
    fontWeight: fonts.fontWeights.thin,
  },

  seeMore: {
    paddingHorizontal: 15,
    color: colors.text.grey,
    fontStyle: 'italic',
    textDecorationLine: 'underline',
    fontFamily: fonts.family.body,
    fontSize: fonts.fontSizes.button,
    fontWeight: fonts.fontWeights.thin,
  },
});

Answer 6

check output of this code 状态= { textLenth：null， numberOfLines：3， }

 handleSeeMore = () => {
this.state.textLenth
  ? this.setState({numberOfLines: 0})
  : this.setState({numberOfLines: 3});

};

 <Text
            numberOfLines={this.state.numberOfLines}
            onPress={() => this.handleSeeMore()}
            ellipsizeMode="middle"
            onTextLayout={({nativeEvent: {lines}}) =>
              this.setState({textLenth: lines.length === 3})
            }>
            This Gig Take a glance at the showcase of our artistic work:
            Modern and Trendy Logo Artworkslkjfkljf ksnfksfnsf Mascot &
            Custom Logo efdfg Artworks:lk knnk 'Explore the
            ultimate Experience..!' To fulfill your designing needs, Make us
            Graphically Yours...!! Why Team StrideInIt? We believe in our
            {'                      '}
            {this.state.textLenth && (
              <Text
                color="red"
                onPress={() => this.setState({numberOfLines: 0})}>
                see more
              </Text>
            )}
          </Text>