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

2017-10-25 14:54:53 +08:00
 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 之外还有什么方法可以获取到指定的组件?

6404 次点击
所在节点    React
1 条回复
xiaoyangka121
2017-10-25 17:47:24 +08:00
自己解决了,
将每个表单项的高度存到 state 中,onLayout 回调的时候更新 state 中对应的值
然后再调用生成表单的方法,UI 就可以更新了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/400609

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX