Bilişim dünyasına kaliteli, özgün ve Türkçe içerikler kazandırmayı hedefleyen bir platform..

React Native içinde, birbirini tekrar eden elementleri birer component haline çevirerek tekrar tekrar kullanabiliriz. Öncelikle FirstComponent.js adında yeni bir Component oluşturalım:

Component Oluşturma

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';

const FirstComponent = (props) => {
  return (
    <>
      <Text>First Component: {props.name}</Text>
      <Text>First Component: {props.surname}</Text>
    </>
  );
 };

 export default FirstComponent;

Import Component

import FirstComponent from './FirstComponent';

Component Kullanma

import React from 'react'
import { StyleSheet, Text, View, Button } from 'react-native';
import FirstComponent from './FirstComponent';

const HomeScreen = ({ navigation }) => {
  return (
    <>
      <FirstComponent name="Ali" surname="Aydın" />

    </>
  )
}

export default HomeScreen;

props ile değil de her gönderilen parametreyi kendi adıyla kullanmak istersek:

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';

const FirstComponent = ({name, surname}) => {
  return (
    <>
      <Text>Adı: {name}</Text>
      <Text>Soyadı: {surname}</Text>
    </>
  );
 };

 export default FirstComponent;