当前位置:  开发笔记 > 编程语言 > 正文

在React Native中按下更改按钮样式

如何解决《在ReactNative中按下更改按钮样式》经验,为你挑选了2个好方法。

我希望我的应用程序中的按钮样式在按下时更改.做这个的最好方式是什么?



1> Besart Hoxha..:

使用TouchableHighlight.

这是一个例子:

在此输入图像描述

'use strict';

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

export default class Home extends Component {
constructor(props) {
    super(props);
    this.state = { pressStatus: false };
}
_onHideUnderlay() {
    this.setState({ pressStatus: false });
}
_onShowUnderlay() {
    this.setState({ pressStatus: true });
}
render() {
    return (
        
            
                
                    {this.props.text}
                
            
        
    );
}
}

Home.propTypes = {
text: PropTypes.string.isRequired
};

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
},
welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    color: "#000066"
},
welcomePress: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    color: "#ffffff"
},
button: {
    borderColor: "#000066",
    borderWidth: 1,
    borderRadius: 10
},
buttonPress: {
    borderColor: "#000066",
    backgroundColor: "#000066",
    borderWidth: 1,
    borderRadius: 10
}
});


只需注意``还必须包含一个`onPress`处理程序才能工作(从React Native v0.34开始)

2> 小智..:

使用道具:

underlayColor


https://facebook.github.io/react-native/docs/touchablehighlight.html

推荐阅读
sx-March23
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有