#3. View, Button

• 클라이언트, 실제 사용자와의 communication이 중요함

create project: view, button

expo init LayoutProps - ‘LayoutProps’ 폴더 생성

github - new repo 생성 ‘Props_201904385’

git remote add origin https://github.com/hufs-mobile/Props_201904385.git
# 에러나면 git remote remove origin 하고 다시
git branch -M main
git push -u origin main

✅  에러나서 git add 하고 커밋 하고 다시 푸시!

git add .
git commit -m "커밋 메세지 작성"
git push -u origin main

• 깃헙에 Props라는 repo 만들고 - LayoutProps 폴더를 연결하는 것이 push

[맥, Mac] 터미널에서 vscode(visual studio code) 열기 설정

→ 설정 해줬음!

code . - 해당 디렉토리의 vscode 열림

App.js → expo start —tunnel → Qr code 나옴

React Native · Learn once, write anywhere

리액트의 StyleSheet → 속성(색, 크기 등등)

<Button></Button>

<Button/>

title은 required!

import React from "react";
import { Button, View, ScrollView, StyleSheet } from "react-native"; //view, scrollview, stylesheet 쓸거임

const App = () => {
  return (<>
    <View style={[styles.container, styles.playingSpace]}>

    </View>
    <ScrollView style={[styles.container]}>
      <View style={[styles.controlSpace]}>
        <View style={[styles.buttonView]}>
          <Button title="1"/>
        </View >
        <View style={[styles.buttonView]}>
          <Button title="2"/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="3"/>
        </View>
        <View style={[styles.buttonView]}> 
          <Button title="4"/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="5"/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="6"/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="7"/>
        </View>
      </View>
    </ScrollView>

  </>);
}

const styles = StyleSheet.create({  //여기에 스타일 만들고 위에 view에 연결해줘야함
  container: {
    height:'50%' //높이 반반으로
  },
  playingSpace:{
    backgroundColor: 'lightyellow',
    borderColor: 'blue',
    borderWidth: 3
  },
  controlSpace: {
    backgroundColor: '#A5A5A5',
    flexDirection: 'row', 
    flexWrap: 'wrap'
  },
  buttonView: {
    width: '50%',
    padding: 10
  }
});

export default App;