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"
}
});
기본적인 style 속성을 잘 알아놓아야겠다.
npm을 설치하면 node도 알아서 설치된다.
npm -v, node -v로 설치가 되었는지 확인할것!
npm install -g yarn 으로 설치하려하는데 npm 권한관련 에러가 나오는 경우가 있다.
이럴땐, 먼저 npm의 디렉토리를 확인해본다.
npm config get prefix
를 실행했을때 /uer/local 로 나올것이다. 모든 유저에게 권한을 주기 위해선,
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
를 입력후, 비밀번호를 입력한다면, yarn을 무탈하게 설치할 수 있다.
npm install -g expo-cli
를 입력하여 expo를 설치한다. 이후,
expo login --username "사용자"
를 입력해 로그인을 하고, 원하는 프로젝트명을 입력하여 expo에서 기본으로 제공해주는 배경 프로젝트를 생성한다.
expo init 원하는프로젝트명
생성한 프로젝트로 디렉토리를 이동하여 expo start 를 입력하면 프로젝트가 실행된다.
그러면 QR코드가 터미널에 출력될텐데, 이때 expo가 설치되어있는 기기로 카메라를 통해 QR코드를 찍으면 자동으로 앱이 실행된다. 코드 수정 후 저장을 하면 알아서 새로고침이 된다!
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
export default function App() {
console.disableYellowBox = true;
return ()
}
const styles = StyleSheet.create({})