React Native justifyContent ve alignItems

flexDirection: row —> Birincil eksen yatay.

flexDirection: column —> Birincil eksen dikey.

justifyContent: Birincil eksende elemanların nasıl konumlanacağını belirler.

alignItems: İkincil eksende elemanların nasıl konumlanacağını belirler.

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

/*  flexDirection: row ---> Birincil eksen yatay.
flexDirection: column ---> Birincil eksen dikey.

justifyContent: Birincil eksende elemanların nasıl konumlanacağını belirler.
alignItems: İkincil eksende elemanların nasıl konumlanacağını belirler.  */

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text>React Native</Text>
      </View>
      <View style={styles.box2}>
        {/* <Text>JavaScript</Text> */}
        <View style={[styles.child, styles.child2]}></View>
        <View style={[styles.child, styles.child3]}></View>
        <View style={[styles.child, styles.child1]}></View>
        <View style={[styles.child, styles.child4]}></View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "yellow",
    // flexDirection: "column", //varsayılan
    flexDirection: "column",
  },
  box1: {
    backgroundColor: "gray",
    flex: 1,
    flexDirection: "rcolumn",
    justifyContent: "center",
    alignItems: "center",
  },
  // child4: {
  //   flex: 1,
  //   backgroundColor: "#ec4c4c",
  // },
  // child5: {
  //   flex: 1,
  //   backgroundColor: "aqua",
  // },
  box2: {
    backgroundColor: "bisque",
    flex: 1,
    flexDirection: "row",
    // justifyContent: "flex-start",
    // justifyContent: "center",
    // justifyContent: "space-around",
    // justifyContent: "space-between",
    // justifyContent: "flex-end",
    justifyContent: "space-evenly",
    alignItems: "center",
    // alignItems: "baseline",
    // alignItems: "stretch",
    // alignItems: "flex-end",
  },
  child: {
    width: 70,
    height: 100,
  },
  child1: {
    backgroundColor: "#ffc107",
  },
  child2: {
    backgroundColor: "#0ac556",
  },
  child3: {
    backgroundColor: "#4630eb",
  },
  child4: {
    backgroundColor: "#000",
  },
});