개발일지 -2주차-

2주차 강의를 듣고 나서..

이미 개인적으로 React Native나 Expo-cli를 사용하는 법을 공부한 경험이 있어서 다시 한번 내용을 상기시키는 강의였다.

2주차 과제

AboutPage.js를 완성해보기
강의에서 제공한 완성본 예시는 다음과 같다.

하지만 강의에서 제공한 완성본 이미지와는 다른 샘플 이미지를 제공했다.

내가 작성한 코드는 다음과 같다.

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

export default function AboutPage() {
  const _URL =""; //저작권 우려로 사진  링크는 생략

return (
    <SafeAreaView style={styles.Container}>
      <StatusBar barStyle="light-content" />
      <View style = {styles.Upper_text}>
        <Text style = {{color : 'white' , fontWeight : 'bold' , fontSize : 30 , textAlign :'center'}}>
          HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다
        </Text>
      </View>
      <View style={styles.Inner_Container}>
        <View style={styles.img_container}>
          <Image style={styles.images} source={{ uri: _URL }} />
        </View>

        <View style={styles.text}>
          <Text
            style={{
              color: "black",
              fontSize: 25,
              textAlign: "center",
              fontWeight: "bold",
            }}
          >
            많은 내용을 간결하게 담아내려 노력했습니다!
          </Text>
          <Text
            style={{
              color: "black",
              fontSize: 17,
              textAlign: "center",
              fontWeight: "bold",
            }}
          >
            꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다
          </Text>

          <TouchableOpacity
            style={{
              backgroundColor: "#f3b13e",
              padding: 20,
              borderRadius: 15,
            }}
            onPress={() =>
              Linking.openURL("https://www.instagram.com/leesejun__/")
            }
          >
            <Text style={{ color: "white", fontSize: 15, fontWeight: "bold" }}>
              여러분의 인스타계정
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    backgroundColor: "#262c74",
  },
  Upper_text:{
    justifyContent : 'center',
    alignItems : 'center',
    marginHorizontal : '7%',
    marginTop : "10%",
  },

  Inner_Container: {
    flex: 1,
    marginHorizontal: "5%",
    marginVertical: "10%",
    backgroundColor: "white",
    borderRadius: 30,
    justifyContent: "center",
    alignItems: "center",
  },

  img_container: {
    flex: 1,
    width: "100%",
    height: "100%",
    justifyContent: "flex-end",
    alignItems: "center",
  },
  images: {
    width: "55%",
    height: "80%",
    borderRadius: 40,
  },

  text: {
    flex: 1.5,
    height : '100%',
    marginTop: "2%",
    alignItems: "center",
    justifyContent:'space-evenly',
    paddingHorizontal: "5%",
    paddingBottom : '10%',
    borderRadius: 30,

  },
});

내가 사용하는 안드로이드 애뮬레이터로 실행한 결과는 다음과 같다.

ios 버전

//글자 크기는 화면 크기에 맞게 설정을 안해서 aos와 차이가 있다.

코드 설명을 간략히 한다면, ios유저를 생각해서 SafeAreaView를 상위 컨테이너로 설정하고 aos유저를 생각해 StatusBar 컴포넌트를 사용해 상단 StatusBar를 표시했다.
.
.
.
인스타 바로가기 버튼은 Linking 컴포넌트를 사용해 실제 나의 인스타 계정으로 바로가기를 설정했다.