android - 如何使用 Expo 框架测量 React Native 中的文本

标签 android react-native expo

我目前正在尝试基于 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 构建过程,这意味着它不再可移植。

我意识到要渲染这个还有很多工作要做,但我已经可以计算出 View 的宽度和高度,我希望我能找到一种方法来测量文本以根据屏幕大小而不是试图依赖点。

最佳答案

您需要将 onLayout 事件附加到您的 View 。一旦 RN 计算出来,你就会得到尺寸。

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

关于android - 如何使用 Expo 框架测量 React Native 中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47128201/

相关文章:

javascript - 安卓猜谜游戏?当用户正确时如何更改随机数并在用户什么都不输入时解决崩溃修复?

android - 在 react-native 中从 java 代码访问 java 变量到 javascript 代码

android - Firebase 测试实验室不支持 coverageFile 环境变量

React-native - iOS - 架构arm64的34个重复符号

react-native - 键盘涵盖的文本输入(React-Native)

Android无法导入RecyclerView & CardView

ios - React Native TextInput 背景颜色在设置为透明颜色时看起来是双层的

react-native - 如何重置嵌套在抽屉导航器中的堆栈导航器的状态?

javascript - 如何取消订阅(删除监听器)React Native Expo 推送通知

ios - AsyncStorage 引用崩溃 react iOS 上的 native 应用程序