Reactnative中ref

ref是什么？
ref是组件的特殊属性，组件被渲染后，指向组件的一个引用。可以通过组件的ref属性，来获取真实的组件。
因为，组件并不是真正的DOM节点，而是存在于内存中的一种数据结构，称为虚拟的DOM，只有当它真正的插入文档之后，才变为真正的DOM节点。根据React的设计，所以的DOM变动都发生在虚拟DOM上，然后再将实际的部分反映到真实的DOM上--这就是 DOM DIff，它可以提高页面性能。


如何使用ref呢？

ref属性的定义是在使用组件的部分，而组件的方法之类的都是在定义组件的里面就有的。render方法被调用的时候，组件就会被渲染。渲染完成之后，就可以获取这个组件实例啦，因而就可以调用组件实例里的方法或者变量啦。

定义组件的方式一   ref="reftest"
this.refs.reftest     或者     this.refs[reftest]   ，  这两种方式都可以获得当前的组件。
获得当前组件的大小， let size = this.refs.reftest.getSize();

定义组件的方式二   ref={reftest=>this.reftest=reftest}   [当组件被渲染后，ref属性reftest就有值啦，然后我们将它赋值给this.reftest 。接下来就可以使用this.reftest来获取相应的方法]
this.reftest     或者     this.refs['reftest']   ，  这两种方式都可以获得当前的组件。
这种方式定义，就可以这样使用，var size = this.reftest.getSize();

<Text style={{fontSize:20}}
      onPress={()=>{
        var size =  this.refs.reftest.getSize();
        this.setState({
            size:size,
        })
      }
      }
    >
    获取气球大小:{this.state.size}

</Text>
<State ref="reftest">

</State>

State中的方法：

export default class State extends Component {

    constructor(props){
        super(props);
        this.state={
            size:60,
        }
    }
    getSize(){
        return this.state.size;
    }
    render() {
        return <View style={{flex: 1}}>
            <NarBar onSelect={() => {
                Actions.pop()
            }} title='下一页'/>
            <Text style={{fontSize:20}}
                  onPress={()=>{
                      this.setState({
                          size:this.state.size+10
                      })
                  }}
            >
                变大变大
            </Text>

            <Text style={{fontSize:20}}
                  onPress={()=>{
                      this.setState({
                          size:this.state.size-10
                      })
                  }}
            >
                变小变小
            </Text>
            <Image style={{width:this.state.size,height:this.state.size,backgroundColor:'red'}}/>
        </View>
    }

}

转载于:https://www.cnblogs.com/cui-cui/p/8548070.html