V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  React

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

  •  
  •   xiaoyangka121 · 29 天前 · 300 次点击

    现在项目中有个需求需要动态生成 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 “会直接报错 0_1508912462383_WX20171025-142011@2x.png

    如果 ref 设置为 ref= {component => this.photoPickerRef = component} 修改样式时

    this.photoPickerRef.setNativeProps({   
          height:viewHeight,
          backgroundColor:'red'
    });
    

    0_1508912462383_WX20171025-142042@2x.png 表单项是动态生成的 this.photoPickerRef 没有办法写死的。

    请问除了 ref 之外还有什么方法可以获取到指定的组件?

    1 回复  |  直到 2017-10-25 17:47:24 +08:00
        1
    xiaoyangka121   29 天前
    自己解决了,
    将每个表单项的高度存到 state 中,onLayout 回调的时候更新 state 中对应的值
    然后再调用生成表单的方法,UI 就可以更新了。
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   878 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 51ms · UTC 23:49 · PVG 07:49 · LAX 15:49 · JFK 18:49
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1