Javascript 如何比较<；中的numberOfLines道具值；文本>；有多少行来自数据？

我的代码需要你的帮助。我有一个屏幕，需要阅读更多和阅读更少的按钮。但如果数据只有几个字，则不能呈现按钮

我有一个从后端返回的数据，格式如下：

data: "1. this is just an example of free text, I'm typing this on Friday \r\n 2. I like seafood. I want to go to beach right now \r\n\ 3. I need holidays, I need a long holidays \r\n\ 4. Hello World, this is a dummy data \r\n\ 5. How to solve this problem? \r\n\ 6. Help me please \r\n\ 7. Thank you"

我想申请“多读”和“少读”。所以我这样做了：

state = { readMore: false }
render() {
  return (

  // Some code

  <Text style={styles.textContent} numberOfLines={readMore? null : 5}>
    {data}
  </Text>
  <TouchableOpacity
    onPress={this.setState({ readMore: !this.state.readMore})} 
    style={{ paddingTop: 4 }}>
       {readMore ? (
          <Text style={styles.readMoreStyle}>read less</Text>
       ) : (
          <Text style={styles.readMoreStyle}>read more</Text>
       )}
   </TouchableOpacity>
)}

如果我使用上面的虚拟数据，控制台将返回7。当我在游戏中使用numberOfLines道具时，情况就不同了。它将呈现我的每一行数据，但当一行太长时，它将移动到第二行以适应屏幕。把它读成两行

例如，我的数据的第一行是：“您好，这只是一个文本。请帮我解决这个问题。我是react native的新手，所以我需要您的经验”

它太长了，在iphone5s中可能会用3行来渲染

如果数据少于5行（numberOfLines={5}），如何设置逻辑以显示按钮只读更多

谢谢

---

一个想法是计算屏幕大小并相应地调整“screenSizeValue”

你能告诉我怎么计算吗？

const thisData = data
const test = `${thisData.split(/\r\n|\r|\n/).length}`;
console.log(test)

numberOfLines={readMore? null : screenSizeValue}