typescript - 根据子尺寸设置父尺寸的高度和宽度

Question

我需要根据他 child 的高度和宽度设置 View 的高度和宽度。可能吗？

我尝试使用 onLayout prop，但实际上我没有得到正确的使用方法。此外，我正在尝试使用 measure 方法，但 refs 现在已在 react-native 0.59 上弃用。

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>
        )
    }

}

Answer 1

如果您使用带钩子(Hook)的 React(版本 16.8 及更高版本)，这是通过使用钩子(Hook)定期完成的。首先像这样创建一个 useLayoutDimension Hook :

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,
  }
}

然后在 Child 组件中执行此操作:

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>
  )
}

然后在 Parent 组件中，您可以像这样为维度设置一个状态:

//...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}}

注意:这是使用类和功能组件的组合(子组件是功能组件，父组件是类组件)。如果您对这些概念不满意 this会有所帮助。 useState 是使用 this.state 的钩子(Hook)方式，useEffect 是在特定状态更改时触发的钩子(Hook)。如果您对此不熟悉，请简要阅读 hooks会有很大帮助。

PS:第一次渲染将没有尺寸，因为需要设置状态。然而，这通常并不明显。