React-Native [4. 간단한 소개 페이지 만들기]

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

export default function AboutPage() {
  console.disableYellowBox = true;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        HI! 스파르타코딩 앱개발반에 오신 것을 환영합니다!
      </Text>
      <View style={styles.introContainer}>
        <Image
          source={{
            uri: "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4",
          }}
          style={styles.image}
        />
        <Text style={styles.introTitleText}>
          많은 내용을 간결하게 담아내려 노력했습니다!
        </Text>
        <Text style={styles.introdescText}>
          꼭 완주하셔서 꼭 여러분의 것으로 만들어가시길 바랍니다!
        </Text>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Instagram</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
    backgroundColor: "#1F266A",
    paddingTop: 50,
    paddingLeft: 20,
    paddingRight: 20,
    alignItems: "center",
  },
  title: {
    fontSize: 32,
    fontWeight: "bold",
    color: "white",
    marginTop: 50,
  },
  introContainer: {
    backgroundColor: "white",
    borderRadius: 10,
    height: 500,
    marginTop: 40,
    padding: 30,
    alignItems: "center",
    justifyContent: "center",
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 30,
  },
  introTitleText: {
    width: 250,
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
  },
  introdescText: {
    width: 250,
    fontSize: 15,
    fontWeight: "bold",
    textAlign: "center",
    marginTop: 20,
  },
  button: {
    backgroundColor: "orange",
    borderRadius: 10,
    width: 200,
    height: 50,
    alignItems: "center",
    justifyContent: "center",

    marginTop: 20,
  },
  buttonText: {
    fontSize: 30,
    color: "white",
  },
});

헷갈렸던것들

가운데정렬

Text는 textAlign: 'center'!!!!

alignItems vs justifyContent

alignItems : 세로 방향만 따지는 정렬이다. 따라서 center 선언시 세로 기준 가운데 정렬이 된다.
justifyContent : 가로 방향만 따지는 정렬이다. 따라서 center 선언시 가로 기준 가운데 정렬이 된다.

아직 공부해야할 부분

자유자재로 Image 크기 다루기

width와 height를 일정한 크기로밖에 선언하지 못한다.
가령, width: '100%', height: 100 을 하였는데 그림이 나오지 않는데 왜 그런건지...ㅠㅠ

버튼 클릭시 해당 url 이동

Instagram 버튼을 누르면 내 인스타 주소로 이동하게 만들고 싶었으나, 아직 onPress 등의 함수를 다루는 방법을 모르겠다. 차근차근 배우다보면 알게 되겠지.