React Native é como React, mas os blocos de construção do React Native são os componentes nativos, enquanto os blocos de construção do React são componentes da web.

Componentes

import React from 'react';
import { Text, View } from 'react-native';
const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

      

No código acima, importei Reactpara usar JSX Texte Viewsão componentes importados dos react-nativequais nos permite renderizar um texto e um contêiner, respectivamente.

Os componentes são como projetos. O que quer que eles retornem será processado como um elemento React. Esses elementos React nos permitem descrever o que queremos ver na tela.

Este código é definido HelloWorldAppcomo um novo componente.

Adereços

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  center: {
    alignItems: 'center'
  }
})
const Greeting = (props) => {
  return (
    <View style={styles.center}>
      <Text>Hello {props.name}!</Text>
    </View>
  );
}
const LotsOfGreetings = () => {
  return (
    <View style={[styles.center, {top: 50}]}>
      <Greeting name='Rexxar' />
      <Greeting name='Jaina' />
      <Greeting name='Valeera' />
    </View>
  );
}

      

Os adereços são as propriedades dos componentes React. No React Native, podemos personalizar componentes com diferentes parâmetros chamados props. Eles são imutáveis ​​e não podem ser alterados.

Aqui, estamos usando namecomo suporte para o Greetingcomponente. Como você pode ver, podemos reutilizar os componentes com parâmetros diferentes usando esses adereços.

Estado

Ao contrário dos adereços imutáveis, os estados permitem que os componentes React alterem as saídas em resposta à resposta da rede, às ações do usuário, etc. Embora os estados sejam variáveis, eles não são passados ​​como parâmetros. Os componentes inicializam estados e os gerenciam internamente.

import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native'
class App extends Component {
  state = {
    count: 0
  }
onPress = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
        >
         <Text>Click me</Text>