RN自定义Button

系统的Button不好看而且不容易扩展，所以在这里使用TouchableOpacity自定义一个Button

import React, {Component} from "react";
import {Text, StyleSheet, TouchableHighlight, TouchableOpacity, View} from "react-native";

export default class Button extends Component {
    state = {
        status: 1,
        disabled:false,
    };
    /*customPressHandler(){
        //不建议这样定义方法
        alert('你按下了按钮');
    }*/
    customPressHandler = () => {
        //自定义的方法，请使用属性来定义,这里自定的把this绑定到这个方法上
        alert('你按下了按钮' + this.state.status);
    };
    onPress = ()=>{
        const {onPress } =this.props;
        onPress ? onPress():"";
    };
    enable=()=>{
        this.setState({
          disabled:false,
      })
    };
    disabled =()=>{
        this.setState({
            disabled:true,
        })
    };
    render(){
        const {name, backgroundColor} = this.props;
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center',marginBottom:50}}>
                <TouchableOpacity
                    disabled={this.state.disabled}
                    style={[styles.button,
                        {backgroundColor:backgroundColor?backgroundColor:'green'},
                        this.state.disabled && styles.disabled]}
                    onPress={this.onPress}>
                    <Text style={styles.buttonText}>{name ? name:"确定"}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        width: 150,
        height: 40,
        borderRadius: 20,
        backgroundColor: 'green',
        justifyContent: 'center',
        overflow: 'hidden'
    },
    buttonText: {
        textAlign: 'center'
    },
    disabled:{
        backgroundColor:'gray',
    },
});

使用这个自定义的Button

import React, {Component} from "react";
import {Modal, Text, StyleSheet, TouchableHighlight, TouchableOpacity, View} from "react-native";
import Button from "./component/Button";

export default class ModalExample extends Component {
    state = {
        modalVisible: false,
        status: 1
    };

    setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }
    fetchData=()=>{
        //禁用按钮
        this.refs.button.disabled();
        this.timer = setTimeout(()=>{
            //获取完数据后启用按钮
            this.refs.button.enable();
        },3000);
    };
    componentWillUnmount() {
        // 请注意Un"m"ount的m是小写
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearTimeout(this.timer);
    }
    render() {
        return (
            <View style={{marginTop: 22}}>
                <Button />
                <Button name='取消' backgroundColor='red' onPress={()=>{alert("1")}}/>
                {/*ref就相当于html中的id，标记和引用组件*/}
                <Button ref='button' onPress={this.fetchData}/>
            </View>
        );
    }
}

这里最后一个Button使用了ref，它就相当于html中的id，标记和引用组件，在这里主要是模拟点击按钮后网络请求数据前后的按钮禁用和启用

<Button ref='button' onPress={this.fetchData}/>

fetchData=()=>{
    //禁用按钮
    this.refs.button.disabled();
    this.timer = setTimeout(()=>{
        //获取完数据后启用按钮
        this.refs.button.enable();
    },3000);
};

这个是使用ref来实现的，还可以使用回调方式：

在自定义组件Button中的onPress方法中这样改写

onPress = ()=>{
    const {onPress } =this.props;
    this.disabled();
    onPress ? onPress(this.enable):"";
};

然后在使用中的fetchData方法中这样改写

fetchData=(enabledCallback)=>{
    this.timer = setTimeout(()=>{
        //获取完数据后启用按钮
        enabledCallback();
    },3000);
};

上面的onPress(this.enable)方法中传入的this.enable会在fetchData中使用enabledCallback接收，然后执行

gif

RN自定义Button

推荐阅读更多精彩内容