ReactNative 之state来改变button的背景图片

需求：默认状态下button有一张背景图， 在点击后变换成另外一张背景图。

使用的技术：TouchableOpacity

思路：

自定义组件UpdateButtonSelectStatus，将TouchableOpacity的两个事件方法bind到自定义的方法上_onPressIn，_onPressOut 并且在这两个方法中记录button的状态，

我这里自定义了名字为 pressStatus 的属性来记录当前的状态。然后根据不同的状态来改变image即可。

import React from'react';

import {

    AppRegistry,

    StyleSheet,

    Text,

    TextInput,

    Alert,

    Image,

    View,

    TouchableOpacity

} from 'react-native';

//如果需要动态改变内容布局等，就需要用到state了，通常的方式就是自己定义组件

class UpdateButtonStatus extendsReact.Component {

    constructor(props) {

        super(props);

     //构建的时候设置初始值

        this.state = {pressStatus:'normal'};

    }

    _onPressIn() {

     //设置不同的状态

        this.setState({pressStatus:'pressin'});

    }

    _onPressOut() {

     //设置不同的状态

        this.setState({pressStatus:'normal'});    }    render() {       return (    <TouchableOpacity

// 将自定义的方法bind到button对应的不同的状态方法上

        onPressIn = {this._onPressIn.bind(this)}

        onPressOut = {this._onPressOut.bind(this)}

//将pressin时候的透明效果删除

        activeOpacity = {1}

//设置style

        style = {styles.loginButton

    } >

// image根据不同的当前的状态来设置不同的图片。猜想此时区分不同状态设置不同的图片，rn就已经将对应关系保存了，

        // 在点击button的时候会自动匹配不同的布局，因此可以看到在后面的调用只有一次，但是却可以支持不同状态的回调。

    <Image source = {this.state.pressStatus =='pressin'? {uri:'login_btn_selected'} : {uri:'login_btn_disabled'}}

        style = {{

            height:33, 

      borderRadius:5

        }} >

    <Text style = {{color:'white', fontSize:13, textAlign:'center', alignSelf:'center', marginTop:10}

    }>

        登录

    < / Text >

    < / Image >

    < / TouchableOpacity >

    )

    }

}

//调用的时候就一次调用，初始化button的状态

<UpdateButtonStatus pressStatus ='normal'/>