zoukankan      html  css  js  c++  java
  • 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={{this.state.size,height:this.state.size,backgroundColor:'red'}}/>
    </View>
    }

    }
  • 相关阅读:
    xcode快捷键大全(转)
    a 和an 的用法区别
    如何在lion系统下安装Xcode 3.2.x版本
    xcode3.2.6升级至4.0.2经验加教训总结(转)
    堆与栈的关系与区别(转)
    [点评]谷歌发布Android 2.3 点评八大亮点
    浅谈关于nil和 null区别及相关问题(转)
    ObjectiveC中的继承与复合技术(转)
    MyEclipse 8.0.0 in Fedora 12
    如何判断两个链表相交及找到第一个相交点
  • 原文地址:https://www.cnblogs.com/cui-cui/p/8548070.html
Copyright © 2011-2022 走看看