typescript - Ställa in förälderns höjd och bredd baserat på barnets dimensioner

Jag behöver ställa in höjd och bredd på en vy, baserat på höjd och bredd på dess barn. Är det möjligt?

Jag försökte använda onLayout-propen, men jag förstod faktiskt inte det rätta sättet att använda den. Jag försökte också använda measure-metoden, men refs är nu föråldrade i 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>
        )
    }

}

Svar #1

Om du använder React med hooks (version 16.8 och uppåt) görs detta vanligtvis genom användning av hooks. Först skapa en useLayoutDimension-hook på följande sätt:

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

Sedan i Child-komponenten gör du så här:

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

Och i Parent-komponenten sätter du sedan en del av tillståndet till dimensionen så här:

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

Du kan sedan ställa in vilken annan komponent som helst i föräldrakomponenten med dimensionstillståndet

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

Observera: Detta använder en kombination av klass- och funktionella komponenter (Barnet är funktionellt och föräldern är en klass). Om du inte är bekväm med dessa koncept kommer detta att hjälpa. useState är hook-sättet att använda this.state och useEffect är en hook som triggas vid specifika tillståndsändringar. Om du inte är bekant med detta kommer en kort genomläsning om hooks att hjälpa avsevärt.

PS: Den första renderingen kommer inte att ha dimensionerna eftersom tillståndet behöver ställas in. Detta är dock vanligtvis inte märkbart.

Relaterade artiklar