React Native, React gibidir, ancak React Native'in yapı taşları, diğer React'in yapı taşlarının web bileşenleri olduğu yerel bileşenlerdir.

Bileşenler

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;

      

Yukarıdaki kodda, ReactJSX an kullanmak için içe aktardım Textve sırasıyla bir metin ve bir kap oluşturmamıza izin veren Viewiçe aktarılan bileşenlerdir react-native.

Bileşenler planlar gibidir. Döndürdükleri her şey bir React öğesi olarak işlenecektir. Bu React öğeleri, ekranda görmek istediklerimizi tanımlamamıza izin verir.

Bu kod HelloWorldAppyeni bir bileşen olarak tanımlanır .

sahne

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>
  );
}

      

Props, React bileşenlerinin özellikleridir. React Native'de bileşenleri props adı verilen farklı parametrelerle özelleştirebiliriz. Değişmezler ve değiştirilemezler.

Burada, bileşen nameiçin bir destek olarak kullanıyoruz Greeting. Gördüğünüz gibi, bu props'ları kullanarak bileşenleri farklı parametrelerle yeniden kullanabiliriz.

Durum

Değişmez desteklerden farklı olarak, durumlar, React bileşenlerinin ağ yanıtına, kullanıcı eylemlerine vb. yanıt olarak çıktıları değiştirmesine izin verir. Durumlar değişken olsalar da parametre olarak iletilmezler. Bileşenler durumları başlatır ve bunları dahili olarak yönetir.

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>