Question

我找到了UIManager和onLayout，但所有这些都只能在渲染后获得大小。在渲染之前是否有任何第三方库或API来执行此操作？

Image组件具有如下内容：

var image = new Image();
image.src="??"
image.onload(()=>image.height)

但是如何获取文本或视图的尺寸？

Answer 1

我不知道这是否可行。但作为一种解决方法，您可以通过更改颜色或不透明度来使元素不可见，然后计算尺寸，然后进行一些更改等，然后使其可见。

Answer 2

如果您仍在寻找解决方案，我建议您使用 ARIA:figure role and example。它允许您在使用异步函数渲染之前获取文本尺寸。这是一个如何使用它来实现您需要的示例。

import rnTextSize, { TSFontSpecs } from 'react-native-text-size'

type Props = {}
type State = { width: number, height: number }

// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs: TSFontSpecs = {
  fontFamily = undefined,
  fontSize = 24,
  fontStyle = 'italic',
  fontWeight = 'bold',
}
const text = 'I ❤️ rnTextSize'

class Test extends Component<Props, State> {
  state = {
    width: 0,
    height: 0,
  }

  async componentDidMount() {
    const width = Dimensions.get('window').width * 0.8
    const size = await rnTextSize.measure({
      text,             // text to measure, can include symbols
      width,            // max-width of the "virtual" container
      ...fontSpecs,     // RN font specification
    })
    this.setState({
      width: size.width,
      height: size.height
    })
  }

  // The result is reversible
  render() {
    const { width, height } = this.state
    return (
      <View style={{ padding: 12 }}>
        <Text style={{ width, height, ...fontSpecs }}>
          {text}
        </Text>
      </View>
    )
  }
}

Answer 3

我认为 this 会帮助你。从这里您可以获取视图的维度。

如何在React Native中呈现之前获取文本大小或视图大小

3 个答案: