今天把CrazyCodeBoy老师的视频看完了,稍微总结一下:
一,ref属性
ref是组件的一种特殊属性,可以理解为,组件被渲染后,指向组件的一个引用。我们可以通过ref属性来获取真实的组件。
具体的用法就是:在一个文件中导入一个组件,可以通过组件的ref属性,来调用组件中定义的方法,用一个小例子来具体说明一下:
第一个文件:RefTestFather.js
import React,{Component} from 'react';
import {View,Text} from 'react-native';
import RefTest from './RefTest';
export default class RefTestFather extends Component{
constructor(props){
super(props);
this.state = {size:0}
}
render(){
return(
<View>
<RefTest ref='reftest'/> //设置组件的ref属性
<Text
onPress={()=>{
let size = this.refs.reftest.getSize(); //通过组件的ref属性来调用组件的方法
this.setState({size:size});
}
}>size的大小为{this.state.size}
</Text>
</View>
);
}
}
第二个文件,RefTest.js
import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class RefTest extends Component{
constructor(props){
super(props);
this.state = {
size:0,
}
}
getSize(){ //定义一个getSize方法
return this.state.size;
}
render(){
return(
<View>
<Text onPress={()=>{this.setState({size:this.state.size+10})}}>增加</Text>
<Text onPress={()=>{this.setState({size:this.state.size-10})}}>减小</Text>
</View>
);
}
}
这个例子是,在RefTest组件中,通过点击按钮调整size的大小,在RefTestFather中,通过RefTest组件的ref属性,得到组件本身,调用RefTest的getSize()方法,从而得到size的大小。
组件也可以通过:this.refs['reftest'] 这种写法来得到。
或者在组件标签中定义ref属性时,可以写成 ref={reftest=>this.reftest=reftest}; 之后通过this.reftest就可以得到组件了。
二,可点击组件(Touchable系列组件)
Touchable系列组件可以通过包裹视图,来响应用户的点击事件。如:
<TouchableWithoutFeedback onPress={()=>{//自定义事件}}>
<View style={{width:100,height:100}}/> //通过TouchableWithoutFeedback的包裹,该View就可以被点击了
</TouchableWithoutFeedback>
可点击的组件有下列4种:
1,TouchableWithoutFeedback:响应用户的点击事件,在处理点击事件的同时不显示任何视觉反馈。
2,TouchableHighlight:在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。
3,TouchableOpacity:相比TouchableHighlight在按下去会使背景变暗的效果,TouchableOpacity会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色。
4,TouchableNativeFeedback:在Android上还可以使用TouchableNativeFeedback,它会在用户手指按下时形成类似水波纹的视觉效果。注意,此组件只支持Android。
TouchableHighlight,TouchableOpacity,TouchableNativeFeedback三种组件都是在TouchableWithoutFeedback的基础上进行修改的。这里我主要说一下TouchableWithoutFeedback的一些属性。
1,onPress
onPress={()=>{//自定义点击事件}} 该方法在用户点击后调用
2,onLongPress
onLongPress={()=>{//自定义长按事件}} 该方法在用户长按组件后调用,如果没有定义该属性,用户长按组件后,会调用onPress方法。
3,disabled
disabled = ture 或者 false。该属性用来禁用组件的点击。设置为true后,组件不会响应点击事件。
4,onPressIn
onPressIn={()=>{//自定义事件}} 该方法在用户触摸到组件时调用
5,onPressOut
onPressOut={()=>{//自定义事件}} 该方法在用户的手指离开该组件时调用,无论是手指抬起离开屏幕,还是继续按着屏幕但是滑出该组件外,都会调用该方法
参考: