问 题

我希望我的应用中按钮的样式在按下时更改。最好的方法是什么?

解决方案

使用 touchablehighlight 。

这里有一个例子:

'use strict';

import react,{

component,

stylesheet,

proptypes,

查看,

文字,

touchablehighlight

}来自"反应原生";

导出默认类home extends component {

constructor(props){

super(props);

this.state = {pressstatus:false};

}

_onhideunderlay(){

this.setstate({pressstatus:false});

}

_onshowunderlay(){

this.setstate({pressstatus:true});

}

render(){

return(

lt; view style = {styles.container}gt;

lt; touchablehighlight

activeopacity = {1 }

style = {

this.state.pressstatus

?styles.buttonpress

:styles.button

}

onhideunderlay = {this._onhideunderlay.bind (this)}

onshowunderlay = {this._onshowunderlay.bind(this)}

gt;

lt; text

style = {

this.state.pressstatus

?styles.welcomepress

:styles.welcome

}

gt;

{this.props.text}

lt; / textgt;

lt; / touchablehighlightgt;

lt; / viewgt;

);

}

}

home.proptypes = {

text:proptypes.string.isrequired

};

const styles = stylesheet.create({

容器:{

flex:1,

justifycontent:"center",

alignitems:"center" ,

backgroundcolor:"#f5fcff"

},

欢迎:{

fontsize:20,

textalign:"center",

保证金:10,

颜色:"#000066"

},

welcomepress:{

fontsize:20,

textalign:"center",

保证金:10,

颜色:"#fffffff"

},

按钮:{

bordercolor:"#000066",

borderwidth:1,

borderradius:10

},

buttonpress:{

bordercolor:"#000066",

backgroundcolor:"#000066",

borderwidth:1,

borderradius:10

}

});

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐