Reactネイティブのプレス上のボタンスタイルを変更する

Question

私のアプリのボタンのスタイルを変更したいときに押してください。これを行う最善の方法は何ですか？

Answer 1

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

使用のようなもの：

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を使用する場合は、スタイルプロパティの代わりにクラス名を使用することができます。

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。 "handlerButtonOnClick"メソッドに注目してください。

状態が変化すると、コンポーネントが再描画されます（「レンダリング」メソッドが再度呼び出されます）。

幸運;）

Answer 3

これはES6でBesart Hoxhajの答えです。私がこれに答えたとき、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 
    }, 
}); 

Answer 4

小道具を使用します

underlayColor 

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

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