Düğme stili üzerinde değişiklik yap React Native

Question

Uygulamamdaki bir düğmenin stiline basıldığında değişiklik yapılması istiyorum. Bunu yapmanın en iyi yolu nedir? Böyle

Answer 1

kullanın TouchableHighlight. İşte bir örnek

:

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

Answer 2

kullanım şey: Gerçekten olursa olsun nasıl uygularım değildir

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

: Harici CSS kullanırsanız

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

, stil özelliğinin yerine SinifAdi kullanabilirsiniz senin CSS. Gözlerinizi "handlerButtonOnClick" yönteminde tutun.

Durum değiştiğinde, bileşen yeniden oluşturulur ("render" yöntemi yeniden çağrılır).

İyi şanslar;)

Answer 3

Bu ES6 içinde Besart Hoxhaj 'ın cevaptır. Buna cevap verdiğimde, React Native 0.34'tür.

underlayColor 

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

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

Answer 4

pervane kullanın

? Veya dokunduğunda onu değiştirmeli ve dokunma durduktan sonra değişen durumu mu tutmalısınız?