求助 React Native 如何获取指定的组件并修改它的样式

[xiaoyangka121]

现在项目中有个需求需要动态生成 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 之外还有什么方法可以获取到指定的组件？

[xiaoyangka121]

自己解决了，
将每个表单项的高度存到 state 中，onLayout 回调的时候更新 state 中对应的值
然后再调用生成表单的方法，UI 就可以更新了。