根据父视图尺寸确定子尺寸-React Native

Question

我想根据父视图尺寸为子尺寸。我尝试通过获取组件上视图的尺寸并将其设置为状态来进行尝试。但是我的状态维正在逐渐减小到0。我认为这是因为我的视图尺寸适应其内容，而不是采用父视图的尺寸。

所以我尝试通过props在componentWillMount方法中设置状态。并直接从父视图中检索尺寸并将其分配给道具，但这并不是连续进行的，因此我只检索我的初始值（0）。

我的目标是通过flex定义与屏幕尺寸成比例的区域。在这些区域内，根据这些区域的尺寸来定义这些组件的尺寸。要有所反应。

这是我的代码：

state = {
    screenWidth: Dimensions.get('window').width,
    screenHeight: Dimensions.get('window').height,
    widthContainer: 0,
    heightContainer: 0
};

render(){
    return(
        <View
            onLayout={ event => {
                this.setState({
                    widthContainer: event.nativeEvent.layout.width,
                    heightContainer: event.nativeEvent.layout.height
                })
            } }
        >
            <View style={{alignItems: 'center'}} >
                <Image
                    width={this.props.widthCoefMascot * this.state.widthContainer}
                    source={require('../../assets/CtrlWelcome/Scr003a_Lea.png')}
                />
            </View>
            <View style={{height: 250, width: this.state.widthContainer * 0.6}}>
                <ScrollView style={[styles.scrollViewContainer,{width: this.state.widthContainer * 0.6}]} >
                    <Text style={{fontSize: 20}}>
                        {'cette expérience. Cest parti!'}
                    </Text>
                    <View style={styles.buttonStartContainer} >
                        <TouchableOpacity
                            style={[styles.buttonStart,{ width: 0.5 * this.state.widthContainer}]}
                            activeOpacity={0.5}
                            onPress={() => console.log(this.state)}
                        >
                            <Image
                                width={0.5 * this.state.screenWidth}
                                source={require('../../assets/CtrlWelcome/Scr003a_Bouton_Suivez-moi.png')}
                            />
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        </View>
    );
}
}