我正在使用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>
);