React Native onLayout根本不触发

时间:2019-02-08 06:08:35

标签: react-native

我正在使用React Native(v0.58.3),我试图在子组件中调用onLayout事件,以获取动态渲染子组件的高度和宽度。但是,该事件永远不会触发。我也尝试将onLayout应用于父项本身,但仍然不会触发。我尝试将硬编码高度应用于,但仍然没有成功。对于我是React Native的新手,我们将不胜感激。

父组件(index.js):

render() {
    const {input} = this.state;

    let data = input && !this.state.loader ? <ActionCardListView data={input}/> : this.jlSpinner();
    return (
        <View style={[!this.state.loader && input ? commonContainerCSS.container : commonContainerCSS.loaderContainer]}>
            {data}
        </View>
    )
}

孙子项:

render = () => (
    <View style={standardSurveyStyles.container}>
        <View style={standardSurveyStyles.card_layout_portrait} onLayout={this._onLayoutEvent}>
            <View style={standardSurveyStyles.imageContainer_layout_portrait}>
                <Image style={{width: this.state.width, height: this.state.height}}
                       source={require('../../../../landscape.png')}/>
            </View>

            <View style={standardSurveyStyles.dataContainer_layout_portrait}>
                <View style={standardSurveyStyles.header}>
                    <Text numberOfLines={1} ellipsizeMode={'tail'} style={standardSurveyStyles.headerText}>Patient satisfaction</Text>
                </View>
                <View style={standardSurveyStyles.descriptionTextContainer}>
                    <Text numberOfLines={2} ellipsizeMode={'tail'} style={standardSurveyStyles.descriptionText}>Ask your patients to tell you about their visit and the quality of their experience with doctors, support staff, and your facilities.</Text>
                </View>
                <View style={standardSurveyStyles.dateContainer}>
                    <Text numberOfLines={1} ellipsizeMode={'tail'} style={standardSurveyStyles.dateText}>About an hour ago</Text>
                </View>
                <View style={standardSurveyStyles.footer}>
                    <View style={standardSurveyStyles.buttonContainer}>
                        <TouchableOpacity style={standardSurveyStyles.startButton}>
                            <Text style={standardSurveyStyles.startButtonText}>START</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </View>
    </View>
);

0 个答案:

没有答案