În React Native, există două tipuri principale de componente care alcătuiesc o aplicație: componente funcționale și componente ale clasei. Acestea sunt structurate la fel ca într-o aplicație obișnuită React pentru web.

Componente ale clasei

Componentele clasei sunt clase JavaScript ES2015 care extind o clasă de bază din React numită Component.

class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

Acest lucru dă clasa App acces la metode React ciclu de viață cum ar fi render precum și funcționalitatea state / props de la părinte.

Componente funcționale

Componentele funcționale sunt mai simple. Nu își gestionează propria stare sau au acces la metodele ciclului de viață furnizate de React Native. Ele sunt literalmente funcții JavaScript vechi simple și sunt uneori numite componente fără stare.

const PageOne = () => {
    return (
        <h1>Page One</h1>
    );
}

rezumat

Componentele clasei sunt utilizate ca componente pentru containere pentru a gestiona gestionarea stării și pentru a împacheta componentele secundare.

Componentele funcționale sunt, în general, utilizate doar în scopul afișării – aceste componente apelează funcții de la componentele părinte pentru a gestiona interacțiunile utilizatorilor sau actualizările de stare.

Mai multe informații despre starea componentelor

Starea componentei

În Class componente, există o modalitate de a stoca și gestiona starea încorporată în React Native.

class App extends Component {
  constructor () {
    super();
    this.state = {
      counter: 0
    };
  }
  incrementCount () {
    this.setState({
      counter: this.state.counter + 1
    });
  }
  decrementCount () {
    this.setState({
      counter: this.state.counter - 1
    });
  }
  render () {
    return (
      <View>
        <Text>Count: {this.state.counter}</Text>
        <Button onPress={this.decrementCount.bind(this)}>-</Button>
        <Button onPress={this.incrementCount.bind(this)}>+</Button>
      </View>
    );
  }
}

Starea este similară cu recuzita, dar este privată și complet controlată de componentă. Aici constructor() metoda apelează constructorul clasei părinte cu super();Component este clasa părinte a App pentru că folosim extends cuvânt cheie. constructor() metoda inițializează și obiectul de stare al componentei:

this.state = {
  counter: 0
};

Starea poate fi afișată în cadrul componentei:

{this.state.counter}

Sau actualizat apelând:

this.setState({});

Notă: În afară de crearea sa inițială în componenta dvs. constructor() nu trebuie să modificați niciodată direct starea componentei cu this.state =. Trebuie să folosiți this.setState după cum se poate vedea în incrementCount și decrementCount funcțiile de mai sus.

Numărul este incrementat și decrementat prin apelarea funcțiilor transmise către onPress gestionari la fel cum ar fi dacă ați apela un gestionar de clicuri de pe JavaScript pe web.

ÎN AFară: În primul exemplu, <Button> este o componentă personalizată; este o combinație de <TouchableOpacity> și <Text> din API-ul React Native:

const Button = ({ onPress, children, buttonProps, textProps }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
      <Text style={[textStyle, textProps]}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

Mai multe informații despre React Native: