根据状态值更改背景颜色

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

再见，您可以像这样在 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 您的代码已修改。

根据状态值更改背景颜色

Changing backgroundColor depending on the state value

state

react-native

react-native-android

react-native-ios

expo