现在项目中有个需求需要动态生成 form 表单, 表单中有一项需要根据内容的高度来调整表单 UI 的高度。
贴代码
if(formType == "image"){
var myImage = (
<PhotoPicker
ref="photopicker_ref"
key={formType+"_+0"}
height = {height-20}
currentIndex = {index}
onLayout={(event,pThis) => {
var viewWidth = event.nativeEvent.layout.width;
var viewHeight = event.nativeEvent.layout.height;
if (!viewWidth || this.state.containerWidth === viewWidth) {
return;
}
this.setState({
containerWidth: viewWidth,
containerHeight: viewHeight
});
}
>
</PhotoPicker>
);
valueArray.push(
myImage
);
此代码是读取到表单 json 后动态生成表单的代码。 PhotoPicker 组件负责图片的选取和预览。
PhotoPicker 中子组件的高度发生变化后,会调用 onLayout 回调,onLayout 回调中获取最新的高度,并将高度设置给 PhotoPicker 的 style。
如果在 PhotoPicker 添加 ref=” photopicker_ref “会直接报错
如果 ref 设置为 ref= {component => this.photoPickerRef = component} 修改样式时
this.photoPickerRef.setNativeProps({
height:viewHeight,
backgroundColor:'red'
});
表单项是动态生成的 this.photoPickerRef 没有办法写死的。
请问除了 ref 之外还有什么方法可以获取到指定的组件?
1
xiaoyangka121 OP 自己解决了,
将每个表单项的高度存到 state 中,onLayout 回调的时候更新 state 中对应的值 然后再调用生成表单的方法,UI 就可以更新了。 |