Was ist der Status in React Native?

Status ist die Datenquelle. Wir sollten immer versuchen, unseren Zustand so einfach wie möglich zu halten und die Anzahl der zustandsbehafteten Komponenten zu minimieren. Wenn wir beispielsweise 10 Komponenten haben, die Statusdaten benötigen, sollten wir eine Containerkomponente erstellen, um den Status aller dieser Komponenten zu speichern.

Beispiel 1

Wenn der Benutzer die Taste drückt, ändert sich der Tastentitel in EIN/AUS.

Der Zustand wird im Konstruktor initialisiert, wie unten gezeigt –

constructor(props) {
   super(props);
   this.state = { isToggle: true };
}

isToggle ist der dem Zustand zugewiesene boolesche Wert. Der Titel der Schaltfläche wird anhand der Eigenschaft isToggle bestimmt. Wenn der Wert wahr ist, ist der Titel der Schaltfläche EIN, andernfalls ist er AUS.

Wenn die Schaltfläche gedrückt wird, wird die onpress-Methode aufgerufen, die setState aufruft, das den isToggle-Wert wie unten gezeigt aktualisiert –

onPress={() => {
   this.setState({ isToggle: !this.state.isToggle });
}}

Wenn der Benutzer auf die Schaltfläche klickt, wird das onPress-Ereignis aufgerufen und setState ändert den Status der isToggle-Eigenschaft.

App.js

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = { isToggle: true };
   }

   render(props) {
      return (
         <View style={{flex :1, justifyContent: &#39;center&#39;, margin: 15 }}>
            <Button
               onPress={() => {
                  this.setState({ isToggle: !this.state.isToggle });
               }}
               title={
                  this.state.isToggle ? &#39;ON&#39; : "OFF"
               }
               color="green"
            />
         </View>
      );
   }
}
export default App;

Ausgabe

Wenn der Benutzer die Taste drückt, wird die Taste umgeschaltet.

Beispiel 2

Ändern Sie den Text, wenn der Benutzer darauf klickt.

Im folgenden Beispiel wird der Status im Konstruktor wie folgt angezeigt:

constructor(props) {
   super(props);
   this.state = { myState: 'Welcome to Tutorialspoint' };
}

Der Status myState wird in der Textkomponente wie folgt angezeigt:

<Text onPress={this.changeState} style={{color:&#39;red&#39;, fontSize:25}}>{this.state.myState} </Text>

Wenn der Benutzer den Text berührt oder drückt, wird das onPress-Ereignis ausgelöst und dies wird aufgerufen. changeState-Methode, die den Text ändert, indem sie den Status myState wie unten gezeigt aktualisiert -

changeState = () => this.setState({myState: 'Hello World'})

output

Das obige ist der detaillierte Inhalt vonWas ist der Status in React Native?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!