现在项目中有个需求需要动态生成 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'
});
请问除了 ref 之外还有什么方法可以获取到指定的组件?
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.