如何使用Expo框架在React Native中測量文本

Question

我目前正在嘗試基於Expo構建我的React Native應用程序，而沒有涉及本機依賴項。 我想知道是否有一種方法可以測量文本（直到像素），這樣我就可以做出一些明智的布局選擇，而不會出現省略或怪異的環繞效果。

基本上，我希望能夠執行以下操作：

//Pseudo Code
class SomeScreen extends React.Component {
  //returns a height that fits the width without wrapping
  fitToWidth(text, width) { 
    //I don't have a framework for this in Expo
  }
  render() {
    <View>
      <MyText fontSize={fitToWidth('SomeString', 375)} value='Some String' />
    </View>
  }
}

由於易於測試，因此可以在Expo中運行它真是太好了，我希望有人對如何實現這一想法有所了解。 我可以放入一些庫，但是它需要退出Expo構建過程，這意味着它不再可移植。

我意識到要呈現此效果還有很多事情要做，但是我已經可以弄清楚視圖的寬度和高度了，我希望我可以找到一種方法來測量文本，從而根據屏幕尺寸選擇字體而不是依靠點。

Answer 1

您需要將onLayout事件附加到您的視圖。 RN計算出該尺寸后，您將獲得尺寸。

https://facebook.github.io/react-native/docs/view.html#onlayout