如何比較numberOfLines道具值 <Text> 與數據行數有關？

Question

我的代碼需要您的幫助。 我的屏幕需要閱讀更多和閱讀更少的按鈕。 但是，如果數據只有幾個字，則不得渲染按鈕。

我從后端返回的數據具有以下格式：

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

我默認將numberOfLines設置為5。 並且如果用戶單擊了“ read more”，將顯示所有數據；如果用戶單擊了“ readless”，則將顯示5行。

我試圖使用此方法來控制數據的行數：

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

如果我使用上面的虛擬數據，則控制台將返回7。當我使用numberOfLines道具時，它會有所不同。 它將呈現我數據的每一行，但是當一行太長時，它將移至第二行以適合屏幕。 並讀為2行。

例如，我的數據的第一行是：“您好，這只是文本。請幫助我解決此問題。我是react-native的新手，所以我需要您的經驗”

它太長了，在iPhone 5s中可能會以3行顯示。

我如何設置邏輯以僅在數據少於5行（numberOfLines = {5}）時顯示按鈕讀取更多內容

謝謝

Answer 1

numberOfLines={readMore? null : screenSizeValue}

一種想法是計算屏幕尺寸並相應地調整“ screenSizeValue”。