如何在 React-Naitve (Javascript) 中显示更多/更少的文本 [英] How to show for text More/Less in React-Naitve (Javascript)

问题描述

我正在开发 react-native 应用程序.在那，我们在文本上显示了一些描述，可能是行数.

I am developing react-native application. In that, We are showing some description on Text, It may be number of lines.

所以，如果数据超过 3 行，我必须在展开时显示 More 和 Less.

So, If data has more than 3 lines, I have to show More and Less if it's expanded.

        <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 库，但我想通过自定义代码实现它.

I have found react-native-view-more-text library, But I would like to implement it by custom code.

注意:我在 Flatlist 中显示该文本.

Note: I am displaying that Text in Flatlist.

有什么建议吗?

推荐答案

我是这样试的，希望对你和其他人有帮助！

I tried in this way, Hope it helps to you and others!

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

这篇关于如何在 React-Naitve (Javascript) 中显示更多/更少的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！