Typescript 设置父项'；基于子维度的高度和宽度

我需要根据孩子的高度和宽度设置视图的高度和宽度。可能吗

我试着使用onLayout道具，但实际上我没有得到正确的使用方法。此外，我还尝试使用measure方法，但react native 0.59上现在不推荐使用REF

import React, {Component} from 'react';
import {View, Text} from 'react-native'

export default class myClass extends Component{
    render(){
        return(
            <View style={styles.container}>
               <View style={{}}>   //HERE I WANNA SET width and height of his child
                 <View>
                   <Text>Hello<Text>
                   <Text>Hello<Text>
                   <Text>Hello<Text>
                 </View>
               </View>
            </View>
        )
    }

}

import React，{Component}来自'React'；
从“react native”导入{View，Text}
导出默认类myClass扩展组件{
render（）{
返回(
//在这里，我想设置他的孩子的宽度和高度
你好
你好
你好
)
}
}

如果您正在使用react with Hook（版本

16.8

及以上），这是通过使用Hook定期完成的。首先创建一个useLayoutDimension挂钩，如下所示：

import { useState, useCallback } from 'react'

export function useLayoutDimension() {
  const [dimension, setDimension] = useState(0)
  const layoutDimension = { width: 0, height: 0 }
  const onLayout = useCallback(({ nativeEvent }) => {
    layoutDimension.width = nativeEvent.layout.width
    layoutDimension.height = nativeEvent.layout.height
    if (dimension !== layoutDimension.width && layoutDimension.width > 0) {
      setDimension(layoutDimension)
    }
  }, [])

  return {
    dimension,
    onLayout,
  }
}

//...rest of the parent component
//Child below
<ChildComponent
    getChildDimensions={(dimensions) => {
        this.setState({
            dimensions: dimensions,
        })
    }}
/>

然后在子组件中执行以下操作：

import { useLayoutDimension } from 'app/hooks'

export const ChildComponent = (props) => {
  const { dimension, onLayout } = useLayoutDimension()

  useEffect(
    () => {
      props.getChildDimensions(dimension)
    },
    [dimension]
  )

  return (
    <View style={styles.ShadowWrapper} onLayout={onLayout}>
        {...content}
    </View>
  )
}

从'app/hooks'导入{useLayoutDimension}
导出常量ChildComponent=（道具）=>{
const{dimension，onLayout}=useLayoutDimension（）
使用效果(
() => {
道具。getChildDimensions（维度）
},
[维度]
)
返回(
{…内容}
)
}

然后在父组件中，将一段状态设置为维度，如下所示：

import { useState, useCallback } from 'react'

export function useLayoutDimension() {
  const [dimension, setDimension] = useState(0)
  const layoutDimension = { width: 0, height: 0 }
  const onLayout = useCallback(({ nativeEvent }) => {
    layoutDimension.width = nativeEvent.layout.width
    layoutDimension.height = nativeEvent.layout.height
    if (dimension !== layoutDimension.width && layoutDimension.width > 0) {
      setDimension(layoutDimension)
    }
  }, [])

  return {
    dimension,
    onLayout,
  }
}

//...rest of the parent component
//Child below
<ChildComponent
    getChildDimensions={(dimensions) => {
        this.setState({
            dimensions: dimensions,
        })
    }}
/>

父组件的其余部分 //下面的孩子 { 这是我的国家({ 尺寸：尺寸， }) }} /> 然后，可以使用标注状态设置父零部件中的任何其他零部件

<View style={{width: this.state.dimension.width, height: this.state.dimension.height}}

---

另外，我的类是模态的，子视图是模态必须呈现的。这意味着我正在我的子视图中设置状态（isVisible状态）。正如您所说的拆分意味着将我的子视图作为子组件，但这样做我不能在我的子组件中设置state。你知道我该怎么办吗？也许将isVisible变量作为道具从父对象传递给子对象？当子组件不是类时，是否可能？模态不应产生影响。当组件渲染时，关键点正在使用挂钩。isVisible状态只应在屏幕上设置模态的动画并使其重新激活，因此不会出现任何问题。将维度状态保留在父级中，并仅运行回调将维度信息返回给父级，这就是您要查找的数据流。不需要将这两个文件分开。如图所示，将上述内容完全结合起来应该会产生正确的结果（以及我提到的注意事项）。我经常使用它。这个钩子在其依赖项中缺少
dimension
和
layoutdimmension
。另外，将
layoutdimmension
指定为依赖项将导致每次渲染时仅重新创建布局。