react-native-Button-TouchableOpacity

一:基本介绍:
组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,透明度会改变,此过程中,并不会真正改变视图层级。<视图可以是其它组件,如: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方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值