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

时间:2016-01-06 04:50:09

标签: javascript reactjs react-native

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

5 个答案:

答案 0 :(得分:35)

使用TouchableHighlight

这是一个例子:

enter image description here

'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 (
        <View style={styles.container}>
            <TouchableHighlight
                activeOpacity={1}
                style={
                    this.state.pressStatus
                        ? styles.buttonPress
                        : styles.button
                }
                onHideUnderlay={this._onHideUnderlay.bind(this)}
                onShowUnderlay={this._onShowUnderlay.bind(this)}
            >
                <Text
                    style={
                        this.state.pressStatus
                            ? styles.welcomePress
                            : styles.welcome
                    }
                >
                    {this.props.text}
                </Text>
            </TouchableHighlight>
        </View>
    );
}
}

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
}
});

答案 1 :(得分:8)

使用道具:

underlayColor

<TouchableHighlight style={styles.btn} underlayColor={'gray'} />

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

答案 2 :(得分:2)

使用类似的东西:

class A extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      onClicked: false
    }
    this.handlerButtonOnClick = this.handlerButtonOnClick.bind(this);
  }
  handlerButtonOnClick(){
    this.setState({
       onClicked: true
    });
  }
  render() {
    var _style;
    if (this.state.onClicked){ // clicked button style
      _style = {
          color: "red"
        }
    }
    else{ // default button style
      _style = {
          color: "blue"
        }
    }
    return (
        <div>
            <button
                onClick={this.handlerButtonOnClick}
                style={_style}>Press me !</button>
        </div>
    );
  }
}

如果使用外部CSS,则可以使用className代替样式属性:

render() {
    var _class = "button";
    var _class.concat(this.state.onClicked ? "-pressed" : "-normal") ;
    return (
        <div>
            <button
                onClick={this.handlerButtonOnClick}
                className={_class}>Press me !</button>
        </div>
    );
  }

如何应用CSS并不重要。继续关注&#34; handlerButtonOnClick&#34;方法。

当状态改变时,组件被重新渲染(&#34;渲染&#34;再次调用方法)。

祝你好运;)

答案 3 :(得分:1)

这是 Besart Hoxhaj 在ES6中的答案。当我回答这个问题时,React Native是0.34。

 import React from "react";
 import { TouchableHighlight, Text, Alert, StyleSheet } from "react-native";

 export default class TouchableButton extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        pressed: false
    };
}
render() {
    return (
        <TouchableHighlight
            onPress={() => {
                // Alert.alert(
                //     `You clicked this button`,
                //     'Hello World!',
                //     [
                //         {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
                //         {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                //         {text: 'OK', onPress: () => console.log('OK Pressed')},
                //     ]
                // )
            }}
            style={[
                styles.button,
                this.state.pressed ? { backgroundColor: "green" } : {}
            ]}
            onHideUnderlay={() => {
                this.setState({ pressed: false });
            }}
            onShowUnderlay={() => {
                this.setState({ pressed: true });
            }}
        >
            <Text>Button</Text>
        </TouchableHighlight>
    );
}
}

const styles = StyleSheet.create({
button: {
    padding: 10,
    borderColor: "blue",
    borderWidth: 1,
    borderRadius: 5
}
});

答案 4 :(得分:0)

React Native现在提供了一个新的Pressable组件,可以检测新闻互动的各个阶段。 因此,为了更改组件的颜色(通常是任何样式),请参见以下示例:

<Pressable
  style={({ pressed }) => [{ backgroundColor: pressed ? 'black' : 'white' }, styles.btn ]}>
  {({ pressed }) => (
    <Text style={[{ color: pressed ? 'white' : 'black' }, styles.btnText]}>
      {text}
    </Text>
  )}
</Pressable>

代码细目:

style={({ pressed }) => [{ backgroundColor: pressed ? 'black' : 'white' }, styles.btn ]}

样式道具在这里接收反映了是否按下Pressable的pressed(boolean),并返回样式数组。

{({ pressed }) => (
    <Text style={[{ color: pressed ? 'white' : 'black' }, styles.btnText]}>
      {text}
    </Text>
)}

这里的文本样式也可以修改,因为pressed组件的子级也可以访问Pressable