앱 개발 공부 5일차

Expo에서 제일 먼저 열어주는 파일은 App.js파일이다. 이 파일을 통해 다른 페이지들이 연결이 된다. .js파일을 작성하기위해 항상 맨 먼저 할 것은 React-native의 도구들을 불러오는 것이다. 이것들을 먼저 import하고, 사용하기 위해 export 한다. 

 

import React from 'react';
import main from './assets/main.png';    //main이란 이미지를 불러온다
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

 

그 다음으로 기본 함수 골격부분이다. 

 

export default function App() {

console.disableYellowBox = true;  //경고창을 없애고 싶을 때 쓸 수 있다.

return (
/* return 구문 안에서는 {슬래시 + * 방식으로 주석 */
)
}

const styles = StyleSheet.create({ })

 

 

다음은 오늘까지 배운 App.js 파일이다. 

 

 

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

const main = 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c'
import data from './data.json';                 //data를 외부에서 가져옴 (딕셔너리+리스트 복합구조로 data.json파일을 만든 후 불러온다. 

export default function App() {
  let tip = data.tip;
  let todayWeather = 10 + 17;
  let todayCondition = "흐림"
  //return 구문 밖에서는 슬래시 두개 방식으로 주석
  return (
    /*      return 구문 안에서는 {슬래시 + * 방식으로 주석    */
    <ScrollView style={styles.container}>
      <Text style={styles.title}>나만의 꿀팁</Text>
      <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
    /* JSX문법안에서는 중괄호 { }를 씌우면 자바스크립트를 쓸 수 있다  */
      <Image style={styles.mainImage} source={{uri:main}}/>
      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
        <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
      </ScrollView>
      <View style={styles.cardContainer}> {/* 하나의 카드 영역을 나타내는 View */}
                { 
          tip.map((content,i)=>{  /*map을 이용하여 반복문을 돌림*/
            return (<View style={styles.card} key={i}> /*key값은 중복이 되지 않아야 하기때문에 i를 넣어줌*/
              <Image style={styles.cardImage} source={{uri:content.image}}/>
              <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
              </View>
            </View>)
          })
         }
        
      </View>
       </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',     //앱의 배경 색
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    marginTop:50,
    marginLeft:20
  },
  weather:{
    alignSelf:"flex-end",
    paddingRight:20
  },
  mainImage: {
    width:'90%',        //컨텐츠의 넓이 값
    height:200,
    borderRadius:10,
    marginTop:20,     //컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
    alignSelf:"center"
  },
  middleContainer:{
    marginTop:20,
    marginLeft:10,
    height:60
  },
  middleButton01: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fdc453",
    borderColor:"deeppink",
    borderRadius:15,
    margin:7
  },
  middleButton02: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fe8d6f",
    borderRadius:15,
    margin:7
  },
  middleButton03: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#9adbc5",
    borderRadius:15,
    margin:7
  },
  middleButtonText: {
    color:"#fff",
    fontWeight:"700",
    textAlign:"center"     //텍스트의 현재 위치에서의 정렬 
  },
  middleButton04: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#f886a8",
    borderRadius:15,
    margin:7
  },
  cardContainer: {
    marginTop:10,
    marginLeft:10
  },
  card:{
    flex:1,
    //컨텐츠들을 가로로 나열
    //세로로 나열은 column <- 디폴트 값임 
    flexDirection:"row",
    margin:10,
    borderBottomWidth:0.5,
    borderBottomColor:"#eee",
    paddingBottom:10

  },
  cardImage: {
    flex:1,
    width:100,
    height:100,
    borderRadius:10,
  },
  cardText: {
    flex:2,
    flexDirection:"column",
    marginLeft:10,
  },
  cardTitle: {
    fontSize:20,
    fontWeight:"700"
  },
  cardDesc: {
    fontSize:15
  },
  cardDate: {
    fontSize:10,
    color:"#A6A6A6",
  },
});

 

오늘은 앱 화면을 불러들일 때, 맨 처음 불러오는 App.js파일에 대해 공부했다. Expo로 App.js화면을 디스플레이 할 수 있는데, 강의에선 DetailPage.js파일을 골격만 만들어도 Expo로 출력이 되었는데, 나는 자꾸 에러가 났다. DetailPage 코딩이 완성된 것을 연결하면 제대로 열렸다. 핸드폰 os나 버전 차이때문인지도 모르겠다. 이 에러를 분석하느라 오늘 강의를 별로 못 들었다. Expo를 연결하는 것이 편리하긴 한데, 에러가 자꾸 생기지 않았으면 좋겠다.