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方法。