如何通过状态参数更改按钮属性 - React-Native

时间:2018-03-13 08:29:13

标签: button react-native native-base

我使用的是原生主题。我想通过状态参数更改按钮主题。 在下面的代码中,我想要做的是当按钮点击,按钮转向成功按钮样式。

import React, { Component } from 'react';
import {  Platform,  StyleSheet  } from 'react-native';    
import { Button, Text} from 'native-base';

class GameScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
          answerBtnClr: 'warning'
        }
      }
    changeButton(){
        this.setState({answerBtnClr: 'success'});
    }
 render() {
    return (
     <Button {this.state.answerBtnClr} onPress={() => this.changeButton()}>
       <Text> Change Me </Text>
     </Button>
     )
    }
 }

    export default GameScreen;

1 个答案:

答案 0 :(得分:1)

render() {
    const showSuccess = this.state.answerBtn === 'success';
    return (
        <Button success={showSuccess} warning={!showSuccess} ... >
            ...
        </Button>
    )
}

修改 你的state和setState有两个不同的变量,但我认为它们是相同的,它只是一个错字。