react-native-Button－TouchableOpacity

Posted 2022-11-30 time_iter

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