Props

Her component üzerinde property yani özellik alabiliyoruz. Component in görüntüsü oluşturulurken hangi verilere ihtiyaç duyuyorsa onları sağlayıp kullanabiliriz.

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

const Title = (props) => {
  return (
    <>
      <View>
        <Text>{props.number + 1}</Text>
        <Text style={[styles.title, { color: props.color }]}>
          {props.numberOfLines} -{props.text}
        </Text>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: 30,
    fontWeight: 700,
  },
});
export default Title;

import { View, Text } from "react-native";
import React from "react";

const User = (props) => {
  return (
    <View>
      <Text>{JSON.stringify(props.data, null, 2)}</Text>
    </View>
  );
};

export default User;

import { View, Text } from "react-native";
import React from "react";

const Users = (data) => {
  return (
    <View>
      <Text>{JSON.stringify(data, null, 2)}</Text>
    </View>
  );
};

export default Users;

import { StyleSheet, View } from "react-native";

import Title from "./src/components/Title"; //Component import edilip kullanılırken büyük harfle başlanır
import User from "./src/components/User";
import Header from "./src/components/Header";
import Users from "./src/components/Users";

const App = () => {
  return (
    <View style={styles.container}>
      <Header />
      <Title text="React Native" color="red" number={1} numberOfLines={1} />
      <Title text="React" color="blue" number={2} numberOfLines={2} />
      <Title text="JavaScript" color="green" number={3} numberOfLines={3} />

      <User data={{ id: 1, name: "Mehmet" }} />

      <Users data={["Ahmer", "Mehmet", "Ayşe", "Fatma"]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

User isminde bir component olsun. object gönderelim, Users isminde bir component olsun. array gönderelim.