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

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

  •  
  •   xiaoyangka121 · 2017-10-25 14:54:53 +08:00 · 6382 次点击
    这是一个创建于 2596 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在项目中有个需求需要动态生成 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
    xiaoyangka121
        1
    xiaoyangka121  
    OP
       2017-10-25 17:47:24 +08:00
    自己解决了,
    将每个表单项的高度存到 state 中,onLayout 回调的时候更新 state 中对应的值
    然后再调用生成表单的方法,UI 就可以更新了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1248 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 23:27 · PVG 07:27 · LAX 15:27 · JFK 18:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.