如何在 React-Native (JavaScript) 中显示更多/更少的文本

Question

我正在开发 react-native 应用程序。在那里，我们在 Text 上显示一些描述，它可能是行数。

所以，如果数据超过 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 库，但我想通过自定义代码来实现它。

注意：我在 FlatList 中显示该文本。

有什么建议么？

原文由 Anilkumar iOS - ReactNative 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Ankit 发布，翻译遵循 CC BY-SA 4.0 许可协议