2주차 - 앱 화면 만들기(JSX문법)

앱개발

2주차 - 앱 화면 만들기(JSX문법)

RAN318 2021. 10. 15. 01:30

728x90

기초 문법에 이어서 씁니다 :)

2021.10.15 - [앱개발] - 2주차 - 앱 화면 만들기(JSX 기본 문법)

JSX 문법

View, Text, ScrollView

<View>
<View></View>
화면의 영역(레이아웃)을 잡아주는 엘리먼트입니다. 현재 App.js 상에서 View는 화면 전체 영역을 가집니다.
우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할 할 수도 있습니다.
하지만 View로 화면을 분할하고 영역을 잡아나가려면 스타일 문법(StyleSheet)과 같이 사용해야 가능합니다.
따라서 여기서 View는 화면의 영역을 잡는 엘리먼트라고만 알아두고 추후 배울 예정입니다.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.subContainerOne}></View>
      <View style={styles.subContainerTwo}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  subContainerOne: {
    flex:1,
    backgroundColor:"yellow"
  },
  subContainerTwo: {
    flex:1,
    backgroundColor:"green"
  }
});

<Text>
앱에 글을 작성하려면 반드시 사용해야하는 엘리먼트입니다.
방금전 위에서 배운 View 엘리먼트 안에서 문자를 작성하면 오류가 발생합니다.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

<ScrollView>
앱 화면을 벗어나는 영역의 경우 ScrollView 엘리먼트로 감싸면 스크롤이 가능해지면서 모든 컨텐츠를 볼 수 있습니다. 다음 코드를 복사 붙여넣기 해보세요!

좀 길어보이지만 같은 코드 복붙을 여러번 한 코드입니다 😉

// ScrollView -1
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
	//각 태그들에는 style이라는 속성을 갖습니다.
	//이 속성은 파일 최하단에 작성한 스타일 코드 객체의 키 값을 부여해
    // 엘리먼트들에 스타일을 줄 수 있습니다.
    //이는 JSX문법을 배우고 난 다음 더 자세히 다룹니다.
    <View style={styles.container}>
			{/* //보인 영역을 갖는 엘리먼트 7가 반복적으로 쓰였습니다. */}
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
    </View>
  );
}

//텍스트가 영역을 갖고, 가운데 정렬도 하며, 테두리 스타일을 갖게 끔 하는 코드입니다.
//JSX를 마저 배우고 스타일에 대해 자세히 다루니
//걱정 안해도 좋습니다!
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    borderColor:'#000',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  }
});

충분히 많은 엘리먼트들을 복붙했고, 화면에는 마지막 부분이 짤려서 보이질 않습니다. 이를 다음과 같이 ScrollView를 상단에서 불러온다음 전체 엘리먼트를 View아닌 ScrollView로 감싸보세요

그러면 화면이 스크롤되면서 가려진 영역을 볼 수 있습니다 😉

// ScrollView -2
import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

export default function App() {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    borderColor:'#000',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  }
});

Button, Image

<Button>과 함수
대부분 앱엔, 버튼이 당연히 있죠? 그리고 그 버튼을 누르면 팝업이 뜨기도하고,
다른 페이지로 넘어가기도 하며 이 밖의 다양한 기능들이 실행됩니다.

우리도 그 버튼을 손쉽게 화면에 달 수 있습니다. 다음 코드를 App.js에 넣어주세요

import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>아래 버튼을 눌러주세요</Text>
        {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. */}
        <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#f194ff" 
          onPress={function(){
            Alert.alert('팝업 알람입니다!!')
          }}
        />
        {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={()=>{
              Alert.alert('팝업 알람입니다!!')
            }}
          />
          </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  },
});

버튼을 눌러보면 팝업 알림이 뜹니다. 확인이 되셨나요?

먼저, 버튼 태그에 title 속성이라던지 color 속성이라던지, onPress 속성들은 어디서 나왔을 까요? 정말 단순하게 공식문서에 적혀있는 사용법을 그대로 사용 했을 뿐입니다.

- 버튼 설명서
https://reactnative.dev/docs/button

- 팝업 알람(Alert) 설명서
https://reactnative.dev/docs/alert#docsNav

각 엘리먼트들 마다 고유한 속성 값을 갖는데, 이 속성 값을 잘 이용하여 다양한 기능을 구현 할 수 있습니다.

Button 태그를 예로 들면, 버튼 안에 잇는 문자는 title이란 속성에 값을 넣어서 구현 할 수 있고, 버튼 색상은 color 속성에 값을 넣어서 적용 할 수 있습니다.

눌렀을 때 어떤 이벤트가 일어나게 하려면 onPress에 함수를 연결(바인딩)하면 되는데, 이 부분을 좀 더 살펴보겠습니다.

다음 두 가지 버튼 구현 방식은 결국 동일한 결과를 보여줍니다.

import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>아래 버튼을 눌러주세요</Text>
        {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. */}
        <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#f194ff" 
          onPress={function(){
            Alert.alert('팝업 알람입니다!!')
          }}
        />
        {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={()=>{
              Alert.alert('팝업 알람입니다!!')
            }}
          />
          </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  },
});

우리가 앞으로 다양한 앱의 기능을 구현할 때 버튼과 함수 연결(바인딩)은 중요한 개념입니다.
그러나 어렵지 않습니다. 위에서 구현한 방법대로만 구현하면 어렵지 않게 여러 기능을 화면에 연결 할 수 있습니다.

<TouchableOpacity/> (=버튼)
Button 엘리먼트는 본인의 영역을 갖습니다. 그렇기 때문에 스타일에도 신경을 써야 하고 ScrollView에서 처럼
카드 형식으로 만든 다음 화면 같은 경우엔 버튼 태그를 사용하기 어렵습니다.

저 영역을 충분히 갖는 텍스트 카드 부분을 눌러야 할 때 말이죠!

이럴 때 사용하는게 TouchableOpacity 엘리먼트 입니다. (EX:카카오톡 채팅방 리스트 )
이 영역은 스타일은 주지 않은 이상 화면에 영향을 주지 않는 영역을 갖습니다.

무슨 말이냐구요? 아까 ScrollView 코드를 다시 App.js에 옮기고 다음과 같이 각 카드의 View 부분을 TouchableOpacity로 변경해보겠습니다.

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

export default function App() {
  const customAlert = () => {
    Alert.alert("TouchableOpacity에도 onPress 속성이 있습니다")
  }
  return (
    <ScrollView style={styles.container}>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    borderColor:'#000',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  }
});

이렇게 여러분들이 만든 임의의 영역과 디자인에 버튼 기능을 달고 싶을 때 주로 사용하게 될 태그입니다.
앞으론 우린 이 친구랑 친해질거에요!

<Image>
앱에 이미지도 넣어봐야겠죠! 두 가지 방식이 있습니다.

1)`assets` 폴더에 있는 이미지를 가져와서 사용하는 방법 (import)

Expo 로고가 assets 폴더에 들어 있길래, 해당 이미지를 사용했습니다.
캡쳐를 보면 로고가 여러번 반복되어 있는데,
그 이유는 <Image>태그의 resizeMode 속성에 repeat을 줬기 때문입니다.
다른 속성 값을 넣으면 어떻게 될까요?

사용 설명서를 보고 적용해보세요

-Image 태그 사용 설명서
https://reactnative.dev/docs/image#docsNav

//Image(assets)
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
		{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
      <Image 
        source={favicon}
		// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        resizeMode={"repeat"}
        style={styles.imageStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    //혹시 미리 궁금하신 분들을 위해 언급하자면,
    //justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
    justifyContent:"center",
    alignContent:"center"
  },
  imageStyle: {
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center"
  }

2) 외부 이미지 링크를 넣어서 사용하는 방식 (url)

외부 이미지를 사용할 땐 source 부분에 url를 사용하면 됩니다.
다음과 같이 말이죠! 그리고 resizemode 에 방금전 사용했던 repeat 말고 cover라는 값을 넣어봤습니다!

// Image(외부)
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
		{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
      <Image 
        source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
		// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        resizeMode={"cover"}
        style={styles.imageStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    //혹시 미리 궁금하신 분들을 위해 언급하자면,
    //justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
    justifyContent:"center",
    alignContent:"center"
  },
  imageStyle: {
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center"
  }
});

구성한 화면 꾸미기 , Styles
- 모든 태그에 공통적으로 있는 styles 속성
  지금껏 자세히 다루진 않았지만,
  엘리먼트들 즉 태그들에 스타일을 주기 위해서 파일 하단에 코드를 작성해 두었었습니다. 다음과 같이 말이죠!
  태그에 스타일을 주는 방식 또한 리액트 네이티브에서 제공하는 **`StyleSheet`** 기능을 가져와 적용합니다.
  
  이 `StyleSheet`은 결국 객체(딕셔너리)를 하나 만드는데, 이쁜 옷들을 정리해 놓는 객체 입니다.
  이 객체에 옷을 사용법 대로 생성한 다음 잘 정리해 두고, JSX 엘리먼트에서 사용 하면 됩니다
  
  사용할 땐 모든 태그에 공통적으로 있는 style 속성에 아래서 만든 객체 키값을 부여하여 적용 합니다.
  
  가장 바깥에 있는 View 태그를 보면
  다음과 같이 styles 속성에 styles 객체 container 키를 연결한 것을 확인 할 수 있습니다.
  <View style={styles.container}>
  
  이렇게 영역에 옷을 입혀주기만 하면 이쁜 화면이 나옵니다.
  그럼 이제 엘리먼트에 줄 수 있는 옷들을 한번 살펴보겠습니다!
- 화면을 꾸며주는 StyleSheet 문법
  1. ✅자주 사용하는 스타일 속성
```
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>스파르타 코딩클럽!!</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    //영역을 잡는 속성입니다. 따로 자세히 다룹니다.
    //flex: 1은 전체 화면을 가져간다는 뜻입니다
    flex: 1,
    //영역의 배경 색을 결정합니다
    backgroundColor: '#fff',
    //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
    //flex를 자세히 다룰때 같이 자세히 다룹니다
    justifyContent:"center",
    alignContent:"center"
  },
  textContainer: {
    //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
    margin:10,
    //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
    padding: 10,
    //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
    borderRadius:10,
    //테두리의 두께를 결정합니다
    borderWidth:2,
    //테두리 색을 결정합니다
    borderColor:"#000",
    //테두리 스타일을 결정합니다. 실선은 solid 입니다
    borderStyle:"dotted",//실선

  },
  textStyle: {
    //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
    color:"red",
    //글자의 크기를 결정합니다
    fontSize:20,
    //글자의 두께를 결정합니다
    fontWeight:"700",
    //가로기준으로 글자의 위치를 결정합니다
    textAlign:"center"
  }
});
```
    margin과 padding은 다음 이미지들 처럼, 영역의 바깥과 안의 여백을 결정합니다.
    그럼 margin과 padding을 늘려보고 줄여보면서 확인해보세요!
    
    -스타일 공식 문서 (공식에서 검색하는 습관들이기!)
    https://reactnative.dev/docs/style#docsNav
    https://reactnative.dev/docs/layout-props
    
    또는 구글에 " react native [필요한 스타일] " 이런식으로 검색해도 많은 레퍼런스를 찾을 수 있습니다.

콘텐츠의 위치: Flex

Flex
화면을 구성할 때 사실 flex가 가장 중요하다고 봐도 과언이 아닙니다.
영역의 레이아웃을 결정하기 때문입니다!
당부드리고 싶은 말씀은, 지금 이해가 안된다고 해서 너무 자책할 필요없습니다.
위에서 배운 스타일 코드들과 달리, flex는 자주 쓰고, 눈으로 확인하는 연습이 좀 수반되야 손에 익는 문법이기 때문입니다. 지금은 이해되는대로만 받아들이고, 앞으로 우리가 앱을 만들면서 차차 익숙해질 예정이니 너무 걱정하지 않으셔도 됩니다!
일단 flex 부터 flex와 같이 사용하는 중요 속성들까지 하나하나 살펴보겠습니다

flex - 영역을 차지하는 속성

FLEX1 부모의 영역을 FLEX1이 1/3을, FLEX2가 2/3을 갖는다

//FLEX V1
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.containerOne}>

      </View>
      <View style={styles.containerTwo}>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    backgroundColor:"yellow"
  }
});

//FLEX V2
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.containerOne}>

      </View>
      <View style={styles.containerTwo}>
        <View style={styles.innerOne}>

        </View>
        <View style={styles.innerTwo}>

        </View>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }

flexDirection - 자리 잡은 영역의 방향

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.containerOne}>

      </View>
      <View style={styles.containerTwo}>
        <View style={styles.innerOne}>

        </View>
        <View style={styles.innerTwo}>

        </View>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }
});

justifyContent

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.containerOne}>

      </View>
      <View style={styles.containerTwo}>
        <View style={styles.innerOne}>
         
        </View>
        <View style={styles.innerTwo}>
          <Text>!!컨텐츠!!</Text>
        </View>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    justifyContent:"flex-start",
    backgroundColor:"orange"
  }
});

alignItems
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={styles.containerOne}> </View> <View style={styles.containerTwo}> <View style={styles.innerOne}> </View> <View style={styles.innerTwo}> <View style={styles.content}></View> </View> </View> </View> ); } const styles = StyleSheet.create({ container: { flex:1 }, containerOne: { flex:1, backgroundColor:"red" }, containerTwo:{ flex:2, flexDirection:"row", backgroundColor:"yellow" }, innerOne: { flex:1, backgroundColor:"blue" }, innerTwo: { flex:4, backgroundColor:"orange", alignItems:"flex-end" }, content: { width:50, height:50, backgroundColor:"#000" } });

728x90

'앱개발' 카테고리의 다른 글

3주차-앱 필수 기초 지식 (0)	2021.10.19
2주차- 앱 화면 만들기(메인화면) (0)	2021.10.17
2주차 - 앱 화면 만들기(JSX 기본 문법) (0)	2021.10.15
2주차-앱 개발 준비 (0)	2021.10.14
1주차-앱개발에 자주 쓰이는 Javascript (0)	2021.10.10

현재글2주차 - 앱 화면 만들기(JSX문법)

새싹분석개발자

새싹분석개발자의 공부 일상 'ㅅ'//

노마드코더, 앱개발플러스, Java, 앱개발종합반, 코딩, expo, API, 웹개발플러스, 리액트네이티브, 웹개발프로젝트, 내일배움단, 파이썬, 스파르타, 앱개발, 파이썬분석, 스파르타코딩클럽, 웹페이지만들기, ReactNative, Ajax, JavaScript,

Today :
Yesterday :

새싹분석개발자