reactNative 读取容器尺寸实现响应式布局```js import { LayoutChangeEvent }

import { LayoutChangeEvent } from 'react-native'
1.   `onLayout` 在组件**第一次渲染并完成布局**后会触发一次。

2.   当组件尺寸或位置改变时（父容器尺寸变、文字换行、样式变更、旋转等），它会再次触发。

3.  触发时机是在 JS 渲染后的布局阶段（不是渲染前），因此不能期望它在 render 内立即可用。

1.读取容器尺寸以实现响应式布局

import React, { useState, useCallback } from 'react'
import { View, Text, LayoutChangeEvent } from 'react-native'

function Card() {
  const [size, setSize] = useState({ width: 0, height: 0 })

  const onLayout = useCallback((e: LayoutChangeEvent) => {
    const { width, height } = e.nativeEvent.layout
    // 防止重复 setState（避免无意义重渲染）
    if (width !== size.width || height !== size.height) {
      setSize({ width, height })
    }
  }, [size])

  return (
    <View onLayout={onLayout} style={{ flex: 1 }}>
      <Text>容器宽: {size.width}, 高: {size.height}</Text>
    </View>
  )
}