一:基本介绍:
组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,透明度会改变,此过程中,并不会真正改变视图层级。<视图可以是其它组件,如:Text, Image>
二:基本使用:
<TouchableOpacity style={Styles.button}>
<Text style={Styles.text}>确定</Text>
</TouchableOpacity>
三:响应点击事件:
-1:匿名函数:
<TouchableOpacity style={Styles.button} onPress={()=>alert(1)}>
<Text style={Styles.text}>确定</Text>
</TouchableOpacity>
-2:onPress使用非匿名函数<自定义方法>:
第一种:
export default class AwesomeProject extends Component {
customAlert =() =>{
alert(1);
};
render() {
return (
<View style={{padding:20}}>
<TouchableOpacity style={Styles.button} onPress={this.customAlert}>
<Text style={Styles.text}>确定</Text>
</TouchableOpacity>
</View>
);
}
}
第二种:
export default class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
status:1
};
}
customAlert =() =>{
alert(this.state.status);
};
render() {
return (
<View style={{padding:20}}>
<TouchableOpacity style={Styles.button} onPress={this.customAlert}>
<Text style={Styles.text}>确定</Text>
</TouchableOpacity>
</View>
);
}
}
三:封装js
-1:定义一个js文件,封装为一个按钮,按钮中间是一个Text,其中文字是从外面传入进来,点击alert,alert中间显示text文字:
import React,{ Component} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
} from 'react-native';
export default class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
name:''
};
}
customAlert =() =>{
alert(this.props.name);
};
render() {
//解构:
// const {name}=this.props;
return (
<View style={{padding:20}}>
<TouchableOpacity style={Styles.button} onPress={this.customAlert}>
<Text style={Styles.text}>{this.props.name}</Text>
</TouchableOpacity>
</View>
);
}
}
const Styles = StyleSheet.create({
button:{
width:140,
height:40,
borderRadius:20,
backgroundColor:'green',
justifyContent:'center',
overflow:'hidden'
},
text:{
textAlign:'center',
}
});
-2:使用:
1-:引入js:<标记导出>
import Button from './Button'
2-:使用:
export default class AwesomeProject extends Component {
render() {
return (
<View style={{padding:20}}>
<Button name='1'/>
<Button name='hello'/>
<Button name='sky'/>
<Button name='name'/>
</View>
);
}
}
3-:如何自定义:
在state中,定义需要的参数,对象,在引入自定义组件并使用时要对使用的对象进行初始化赋值<props,state>
四:模式技巧:
1-:父类与子类的方法调用:
Button.js:
export default class AwesomeProject extends Component {
onPress=()=>{
const {onPress} =this.props;
onPress();
};
render() {
const {text}=this.props;
return (
<View style={{padding:20}}>
<TouchableOpacity style={Styles.button} onPress={this.onPress}>
<Text style={Styles.text}>{text}</Text>
</TouchableOpacity>
</View>
);
}
}
const Styles = StyleSheet.create({
button:{
width:140,
height:40,
borderRadius:20,
backgroundColor:'green',
justifyContent:'center',
overflow:'hidden'
},
text:{
textAlign:'center',
}
});
调用:
import Button from './Button'
export default class AwesomeProject extends Component {
fetchData=()=>{
alert(3)
};
render() {
return (
<View style={{padding:20}}>
<Button text='name' onPress={this.fetchData}/>
</View>
);
}
}
在执行过程中,父类得到子类传递的“参数“,然后根据条件,调用子类的方法:
2-:状态维护:
-1:定义两个修改状态的函数,初始化时设置默认值,在不可用状态下设置背景色:
export default class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
disable:false,
};
}
onPress=()=>{
const {onPress} =this.props;
onPress();
};
enable=()=>{
this.setState({
disable:false,
});
};
disable=()=>{
this.setState({
disable:true,
});
};
render() {
const {text}=this.props;
return (
<View style={{padding:20}}>
<TouchableOpacity
disable={this.state.disable}
style={[Styles.button,this.state.disable&&Styles.disableColor]} onPress={this.onPress}>
<Text style={Styles.text}>{text}</Text>
</TouchableOpacity>
</View>
);
}
}
-2:使用:
export default class AwesomeProject extends Component {
fetchData=()=>{
//此处执行相关好使操作,开始时进行某项设置,结束时执行某项操作<耗时操作时,或者不在主ui线程>
this.refs.Button.disable();
alert(3)
this.refs.Button.enable();
};
render() {
return (
<View style={{padding:20}}>
<Button ref="Button" text='name' onPress={this.fetchData}/>
</View>
);
}
}
此处使用ref相当于一个id,是唯一性的;
-3:模拟耗时操作,使用定时器:
export default class AwesomeProject extends Component {
fetchData=()=>{
this.refs.Button.disable();
this.timer=setTimeout(()=> {
this.refs.Button.enable();
}, 3000);
};
componentWillUnmount() {
this.timer && clearTimeout(this.timer);
}
render() {
return (
<View style={{padding:20}}>
<Button ref="Button" text='name' onPress={this.fetchData}/>
</View>
);
}
}
可以看到当点击按钮之后,三秒种内图片背景色改变,定时器时间到之后恢复到正常颜色
-4:使用回调:
<Callback:>
1-:在Button.js中修改函数,把此方法执行结束需要执行的相关方法传入:
onPress=()=>{
const {onPress} =this.props;
this.disable();
onPress(this.enable);
};
2-:在使用的地方:
eventCallBack 在本函数执行完成后调用的方式,为一个参数传入并使用:
fetchData=(eventCallBack)=>{
this.timer=setTimeout(()=> {
eventCallBack();
}, 3000);
};
执行顺序:
执行时:调用父组件的onPress,然后调用disable方法,然后执行子组件的onPress方法,最后调用父组件的enable方法。