native react 变颜色 点击_在React Native中按下更改按钮样式(Change button style on press in React Native)...

问 题

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

解决方案

使用 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

}

});