Apakah keadaan dalam React Native?

Status ialah sumber data. Kita harus sentiasa cuba memastikan keadaan kita semudah mungkin dan meminimumkan bilangan komponen stateful. Sebagai contoh, jika kita mempunyai 10 komponen yang memerlukan data keadaan, kita harus mencipta komponen bekas untuk menyimpan keadaan semua komponen ini.

Contoh 1

Apabila pengguna menekan butang, tajuk butang bertukar kepada HIDUP/MATI.

Keadaan dimulakan di dalam pembina seperti yang ditunjukkan di bawah -

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

isToggle ialah nilai boolean yang diberikan kepada keadaan. Tajuk butang ditentukan berdasarkan sifat isToggle. Jika nilainya benar, tajuk butang adalah HIDUP, jika tidak ia MATI.

Apabila butang ditekan, kaedah onpress akan dipanggil, yang akan memanggil setState yang mengemas kini nilai isToggle, seperti yang ditunjukkan di bawah -

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

Apabila pengguna mengklik butang , acara onPress dipanggil dan setState mengubah keadaan harta isToggle.

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;

Output

Butang akan togol apabila pengguna menekannya.

Contoh 2

Tukar teks apabila pengguna mengklik padanya.

Dalam contoh di bawah, keadaan dipaparkan di dalam pembina seperti berikut-

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

Keadaan myState dipaparkan di dalam komponen Teks seperti berikut-#🎜 🎜#

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

Apabila pengguna menyentuh atau menekan teks, acara onPress dicetuskan dan kaedah this.changeState dipanggil, yang menukar teks dengan mengemas kini keadaan myState seperti yang ditunjukkan di bawah -

rreee#🎜 🎜##🎜🎜 #

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

Output

Atas ialah kandungan terperinci Apakah keadaan dalam React Native?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!