Question

我正在学习如何在React Native上使用React组件，并且现在开始处理事件。我创建了一个处理程序，只要用户按下按钮，该处理程序就会将文本组件转换为ON或OFF。每当state的布尔值更改时，我都设法更改了按钮的颜色，但是我没有设法通过屏幕的backgroundColor来更改按钮的颜色。我试图创建一个函数{color}来根据isToggleOn呈现颜色，但是我的尝试没有成功。

我认为我必须将props传递给它，但是在这种情况下我不知道如何应用它。你能帮我一下吗？

import React from 'react';
import {View, Text, Button} from 'react-native';
import { render } from 'react-dom';

export default class HomeScreen extends React.Component{
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        this.setState(state => ({
          isToggleOn: !state.isToggleOn
        }));
      }

    render() {

        //I tried to render the `color` by creating a function 
        const {color} = this.state.isToggleOn ? 'red' : 'blue';

        return(
            <View 
                style={{
                    flex:1, 
                    alignItems:'center', 
                    justifyContent:'center',
                    backgroundColor:color}}>
                <Text>
                    {this.state.isToggleOn ? 'ON' : 'OFF'}
                </Text>
                <Button color={this.state.isToggleOn ? 'red' : 'blue'} title={this.state.isToggleOn ? 'TURN OFF' : 'TURN ON'} onPress={this.handleClick}/>
            </View>
        )
    }
}

Answer 1

import React from 'react';
import {View, Text, Button} from 'react-native';
import { render } from 'react-dom';

export default class HomeScreen extends React.Component{
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        this.setState(state => ({
          // missing this here
          isToggleOn: !this.state.isToggleOn
        }));
      }

    render() {

        // use variable 
        const color = this.state.isToggleOn ? 'red' : 'blue';

        return(
            <View 
                style={{
                    flex:1, 
                    alignItems:'center', 
                    justifyContent:'center',
                    backgroundColor:color}}>
                <Text>
                    {this.state.isToggleOn ? 'ON' : 'OFF'}
                </Text>
                <Button color={this.state.isToggleOn ? 'red' : 'blue'} title={this.state.isToggleOn ? 'TURN OFF' : 'TURN ON'} onPress={this.handleClick}/>
            </View>
        )
    }
}

Answer 2

Ciao，您可以在View组件上使用条件样式，如下所示：

<View style={this.state.isToggleOn ? styles.bg_red : styles.bg_blue}>

然后按照您的样式：

...
bg_blue: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "blue"
  },
  bg_red: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "red"
  }
  ...

Here您的代码已修改。

根据状态值更改backgroundColor

2 个答案: