Ich lerne, wie React-Komponenten in React Native verwendet werden, und beginne jetzt mit der Behandlung von Ereignissen. Ich habe einen Handler erstellt, der eine Textkomponente in ON oder OFF umwandelt, wenn der Benutzer die Schaltfläche drückt. Ich habe es geschafft, die Farbe der Schaltfläche zu ändern, wenn sich der boolesche Wert von state ändert, aber ich habe es nicht geschafft, dies mit dem backgroundColor des Bildschirms zu tun. Ich habe versucht, eine Funktion {color} zu erstellen, um die Farbe abhängig von isToggleOn zu rendern, aber mein Versuch war erfolglos.

Ich denke, ich muss ein props übergeben, aber ich weiß nicht, wie ich es in diesem Fall anwenden soll. Könnten Sie mir helfen?

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>
        )
    }
}
-2
Tiago 19 Aug. 2020 im 17:12

2 Antworten

Beste Antwort
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>
        )
    }
}
2
Prateek Thapa 19 Aug. 2020 im 14:16

Ciao, Sie könnten einen bedingten Stil für die View -Komponente wie folgt verwenden:

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

Dann in Ihren Stilen:

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

Hier wurde Ihr Code geändert.

1
Giovanni Esposito 19 Aug. 2020 im 14:25