티스토리 뷰
2-3----------------------------------------------
expo 어플 사용하면 바로 어플리케이션 확인가능
npm install -g yarn
expo로 npm을 사용
npm install -g expo-cli
expo로 쉽게 어플 배포 가능->expo서비스 가입필요함.
https://expo.io/signup <-에서 가입
로그인 expo login --username "가입한 이름"
그다음 패스워드 입력
----------------------------------------------------
2-4------------------------------------------------
바탕화면에 폴더 생성후 vscode로 폴더 열기
상단 view에서 terminal클릭하면 하단에 cmd창 생성
하단 입력창에 expo init <프로젝트명>
을 입력
-->expo : 이 시스템에서 스크립트를 실행할 수 없으므로~ 어쩌고 이딴 개같은 오류가 뜬다면?
vscode어쩌고 실행 권한이 머 어쩌고~~
| 방법1 cmd창 띄우기 |
| 지금 이게 안되는 이유가 cmd가 아니고 파워쉘로 하고있어서임./.. 파워쉘은 기본 권한이 restricted라서 안된다 https://notstop.co.kr/401/ 여기를 참고하자.. |
| 방법 2 파워쉘 권한 변경 |
| 1. 윈도우 powershell을 관리자 권한으로 실행 2. Get-ExecutionPolicy 입력 권한이 RemoteSigned아니라면? 3. Set-ExecutionPolicy RemoteSigned입력 4. Get-ExecutionPolicy로 권한 RemoteSigned로 바뀌었는지 확인  |
암튼 다시 init어쩌고 치고~ 맨 위에 blank에서 엔터
그러면 왼쪽에 뭐 폴더생김
담에 cd명령어로 아까 프로젝트명으로 했던거로 들어감~. . . . cd명령어란? 그 폴더로 들어가는거~자세한 사항은 cli명령어를..
그담에 vscode에 expo start치셈
헐 이런게나옴~..
저 qr코드 인식하면 머 .. 웹페이지로 이동이 뜸.. 그러면 아까 vscode로 만든 앱이뜸 blank로 만들었으니 암것도 없겟죵?? 사실 나도 잘모름ㅋㅋ
근데 여기서 주의점...... 이걸 할라면 내 휴대폰이랑 이 expo로그인한 컴퓨터랑 동일한 네트워크여야됨
암튼 일케하면 바로 내가 만든 앱 확인이 가능
-----------------------------------------------------------------------------------------------------------------
2-5--------------------------------------------------------------------------------------------------------------
App()에
console.disableYellowBox=true;하면 경고문구 안보이게됨
컨트롤s로 저장하면 바로 휴대폰에 새로고침됨 적용됨
--------------------------------------------------------------------------------------------------------------
2-6----------------------------------------------------------------------------------------------------------
리액트 네이티브의 태그를 사용하여야 함
import {StuleSheet, Text, View}from 'react-native'; =>리액트 네이티브에서 괄호안의 태그를 꺼낸다
<>: 열때 </>: 닫을때
https://docs.expo.io/versions/v38.0.0/react-native/view/
View - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.io
https://reactnative.dev/docs/view
View · React Native
The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running o
reactnative.dev
https://docs.expo.io/versions/v38.0.0/react-native/view/
View - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.io
모든 태그는 최상위 태그에 의해 감싸져야된다~(??)
그리고 return되는 태그는 return(); 의 소괄호안에 있어야됨
주석은 //
근데 JSX안에 저 태그들 안에서 주석을 달땐 {*/ /*} 단축키 ctrl+/
---------------------------------------------------------------------------------------------------
2-7-----------------------------------------------------------------------------------------------
<View style={styles.container}> </View>
=>보이는 화면을 나타냄
<Text> </Text>
=>문자
1. View
| 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" } }); |
=>이거는... 하면 얘가 너무 많아 근데 스크롤바는없고.... 내릴수도 없고.. 그래서 스크롤뷰 필요함
2. ScrollView
| 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" } }); |
=>스크롤이 가능해짐
그래서 그냥 View아니고 ScorlView사용
--------------------------------------------------------------------------------------------------------------
2-8--------------------------------------------------------------------------------------------------------
1. Button
| 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" }, }); |
=>버튼이 생긴다~
2. onPress
onPress는 버튼 클릭시 실행되는 함수 정의? 인듯
Alert.alert는 팝업화면 띄우기
https://reactnative.dev/docs/button
Button · React Native
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
reactnative.dev
3. 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" } }); |
TouchableOpacity=> 어떤 영역을 가지면서 클릭도 가능한것
4. Image
https://reactnative.dev/docs/image
Image · React Native
A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
reactnative.dev
=>여기서 이미지 스타일 찾아보기
------------------------------------------------------------------------------------------------------------------------------
2-9------------------------------------------------------------------------------------------------------------------------
1. StyleSheet
margin-> 현재 휴대폰 가장자리에서 얘가 얼마나 간격을 두고 있는지
padding-> 안의 내용과 border의 선 사이 간격
borderRadius-> border의 테두리 얼마나 동그란지
borderWidth-> 테두리 두께
borderColor-> 테두리 색
borderStyle-> 테두리 형태
https://reactnative.dev/docs/view-style-props#borderstyle
View Style Props · React Native
Example
reactnative.dev
=>자세한 스타일은 여기
textStyle의
color: 색
fontSize: 글씨크기
fontWeight: 100단위로 글자 두께를 정함
textAlign: 글자 정렬어디로?
https://reactnative.dev/docs/text-style-props#textalign
Text Style Props · React Native
Example
reactnative.dev
-----------------------------------------------------------------------------------------------------------------------
2-10-------------------------------------------------------------------------------------------------------------------
1. flex
flex: 레이아웃 잡는것
flex:1 =>전체화면
flex:1 안에서 또다른 컨테이너들의 경우
flex는 그 안에서 영역을 나눠 가진다
2. flexDirection
flexDirection:"row" 로 하면 자식 컨테이너를 좌우 배치한다.
기본은 column
3. justifyContent
flex와 같은 방향으로 내부에 컨텐츠를 정렬한다
flexDrection이 row인데 justifyContent center면 row방향으로 첫줄에서 중앙 즉 맨위 중앙
flexDrection column인데 justifyContent center면 col방향으로 첫줄에서 중앙 즉 왼쪽 테두리의 중앙에서
4. alignItems
alignItems는 justifyContent와 반대로 col일때 center면 row방향으로 첫줄에서 중앙 맨위 테두리 중앙
==> flexDirection은 컨텐츠가 나열되는 방향, alignItems와 justifyContent는 어디에 걔를 두느냐
음 ..
----------------------------------------------------------------------------------------------------
2-11--------------------------------------------------------------------------------------------
| import React from 'react'; import { StyleSheet, Text, View,ScrollView,TouchableOpacity, Alert,Image } from 'react-native'; import main from "./assets/main.png" export default function App() { const touch_alert=()=>{ Alert.alert('touch') } return ( <View style={styles.main_container}> <View style={styles.container1}> <Text style={styles.text_bold}>"꿀팁ㅋㅋ"</Text> <Image source={main} style={styles.main_image}/> </View> <ScrollView style={styles.container2} horizontal={true}> <TouchableOpacity style={styles.textContainer}> <Text style={styles.container_txt} onPress={touch_alert}>'산책'</Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer}> <Text style={styles.container_txt} onPress={touch_alert}>'인생..'</Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer}> <Text style={styles.container_txt} onPress={touch_alert}>'돈은 어디서 나오는가.'</Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer}> <Text style={styles.container_txt} onPress={touch_alert}>'꿀팁은 어디에'</Text> </TouchableOpacity> <TouchableOpacity style={styles.textContainer}> <Text style={styles.container_txt} onPress={touch_alert}>'찜은 만두만'</Text> </TouchableOpacity> </ScrollView> <ScrollView style={styles.container3}> <TouchableOpacity style={styles.content}> <Text style={styles.container_txt} onPress={touch_alert}>'산책'</Text> </TouchableOpacity> </ScrollView> </View> ); } const styles = StyleSheet.create({ main_container:{ margin:20, flex:1, }, container1:{ margin:10, flex:6, }, container2:{ //horizontal=true, margin:10, flex:2, }, container3:{ flex:10, }, content:{ }, text_bold:{ fontWeight:'bold' }, textContainer:{ padding:10, backgroundColor:'yellow', borderStyle:'solid', borderColor:'#200', height:50, width:100, borderColor:'#120', borderWidth:1, borderRadius:10, margin:10, }, textContainer2:{ padding:10, borderStyle:'solid', borderColor:'#200', height:50, width:100, borderColor:'#120', borderWidth:1, borderRadius:10, margin:10, }, container_txt:{ textAlign:'center' }, main_image:{ width:'90%', height:200, borderRadius:50, }, }); |
----------------------------------------------------------------------------------------------------------------------
2-12------------------------------------------------------------------------------------------------------------------
기본구조
| 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 구문 밖에서는 슬래시 두개 방식으로 주석 return () } const style = StyleSheet.create({}) |
tip-> App()에서 먼저 필요한것을 적고 style에 들어갈 모양들의 이름을 여기서 정하고 나중에 style에서 그 이름
정한 모양에 적는다
| import React from 'react'; import main from './assets/main.png'; import pizza from './assets/pizza.png'; import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native'; export default function App() { console.disableYellowBox = true; return ( <ScrollView style={styles.main_container}> <Text style={styles.title}>나만의 꿀팁</Text> <Image source={main} style={styles.main_image}/> <ScrollView style={styles.middle_container} horizontal={true}> <TouchableOpacity style={styles.middle_button1}><Text style={styles.button_txt}>생활</Text></TouchableOpacity> <TouchableOpacity style={styles.middle_button2}><Text style={styles.button_txt}>재테크</Text></TouchableOpacity> <TouchableOpacity style={styles.middle_button3}><Text style={styles.button_txt}>반려견</Text></TouchableOpacity> <TouchableOpacity style={styles.middle_button4}><Text style={styles.button_txt}>팁</Text></TouchableOpacity> <TouchableOpacity style={styles.middle_button5}><Text style={styles.button_txt}>찜</Text></TouchableOpacity> </ScrollView> <View style={styles.card_container}> <View style={styles.card}> <Image source={{uri:'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3'}} style={styles.card_image}/> <View style={styles.cardText}> <Text style={styles.card_title}>먹다 남은 피자를 촉촉하게!</Text> <Text style={styles.card_desc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text> <Text style={styles.card_date}>2020.09.09</Text> </View> </View> </View> </ScrollView> ) } const styles = StyleSheet.create({ main_container:{ backgroundColor:"#fff" }, title: { fontWeight:"700", fontSize:20, marginLeft:20, marginTop:20 }, main_image:{ marginTop:10, width:"90%", height:200, borderRadius:20, alignSelf:'center'//알아서 센터에 넣기 //alignItems는 flex영역 안에서만 }, middle_container:{ //borderWidth:1,//영역이 선으로 보임 marginTop:10, marginLeft:10, height:60 }, middle_button1:{ padding:15, backgroundColor:"#fdc453", width:80, height:50, margin:8, borderRadius:15 }, middle_button2:{ padding:15, backgroundColor:"green", width:80, height:50, margin:8, borderRadius:15 }, middle_button3:{ padding:15, backgroundColor:"black", width:80, height:50, margin:8, borderRadius:15 }, middle_button4:{ padding:15, backgroundColor:"#fad900", width:80, height:50, margin:8, borderRadius:15 }, middle_button5:{ padding:15, backgroundColor:"pink", width:80, height:50, margin:8, borderRadius:15 }, button_txt:{ color:"#fff", fontWeight:"700", textAlign:'center' }, card_container:{ marginTop:10, marginLeft:10 }, card:{ flex:1, flexDirection:'row', margin:10, borderBottomWidth:0.5, paddingBottom:10, borderBottomColor:"#eee" }, card_image:{ width:100, height:100, flex:1, borderRadius:10 }, cardText: { flex:2, flexDirection:"column", marginLeft:10, }, card_title: { fontSize:20, fontWeight:"700" }, card_desc: { fontSize:15 }, card_date: { fontSize:10, color:"#A6A6A6", } }) |
----------------------------------------------------------------------------------------------------------------------------------
2-13---------------------------------------------------------------------------------------------------------------------------
1.모듈 시스템
-모듈: 외부의 함수를 가져다 쓰는것
-우선 data.json을 만든다
그러고 나서 안에 json형태 데이터를 넣는다
-다음엔 App.js에서 import data from './data.json'을 한다
얘를 for문으로 반복해서 화면에 띄울것이다.
./은 현재 폴더를 의미한다.
../은 상위폴더를 의미한다.->궁금한사람은... 상대경로 절대경로를.. 검색
-let tip =data.tip으로 상단에서 data로 정의한 json폴더의 tip을 접근해 tip이라는 변수로 정의함
tip.map((content,i)=>{}에서 최상단 View태그에서 key={i}로 유니크한 뭐를 줘야됨(이해안감)
==>아마 map으로 반복을 돌리는데 각 하나의 content는 tip:[]에서 tip이라는 key의 val이다
각 val에 접근하기 위해서는 인덱스 번호가 필요, 즉 tip의 val에 해당하는 리스트에서 하나씩 딕셔너리 구조를?
꺼내야되니까 걔를 하나씩 꺼내기 위해서는 그들을 구분하는 인덱스번호가 필요하고 key라는 키워드로 이를 정의하는듯?
문법에 대해 먼저 설명을 하고 실습을 시키면 더 잘 이해가 될텐데..
에.. 다시 말하자면
data.tip은 data.json의 tip:val에서 val을 의미
val은 현재 리스트 형태로 되어있음
[{},{},{}..] 리스트는 또 안에 딕셔너리를 요소로 가진다. tip.map이므로 val 에서의 i번째 인덱스의 요소를content라는 변수(?정확하지 않음..)에 넣고 쓴다.
이때 각 화면의 요소를 화면에 띄우기 위해서는 return을 하게됨
각 화면의 요소는 작은 콘텐트팬 .. 하나의 content화면 그래서 key={i}로 i번째 인덱스 요소를 가져와라? 뭐 이런뜻??
------------------------------------------------------------------------------------------------------------------------------
2-14------------------------------------------------------------------------------------------------------------------------
-태그 안에서 자바스크립트 문법 사용하기
그냥 {}안에 있으면 자바스크립트 문법을 사용할수있다고함(그럼 지금까지 한건 자바스크립트가 아니고 뭐라는거?ㅋㅋ)
-삼항연산자==> let a=10>7? 'true':'false'
삼항연산자... c배울때 맨날 까먹어서 교수님한테 딱밤을맞았던기억이...
-----------------------------------------------------------------------------------------------------------------------------
2-15------------------------------------------------------------------------------------------------------------------------
-파일 이름과 함수이름은 동일해야됨
App.js가 main함수 있는 클래스? 격인듯.. 음 모르겠다^^;
숙제는
| import React from 'react' import {View,Text,StyleSheet,Image,TouchableOpacity} from 'react-native' export default function AboutPage(){ return ( <View style={about_style.back_ground}> <Text style={about_style.top_txt}>HI! 스파르타 코딩 앱개발 반에 오신것을 환영합니다.</Text> <View style={about_style.inner_view}> <Image style={about_style.guy_image} source={{uri:"https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4"}}/> <Text style={about_style.inner_top}>많은 내용을 간결하게 담아내려 노력했습니다!</Text> <Text style={about_style.inner_mid}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다.</Text> <TouchableOpacity style={about_style.inner_op}><Text style={about_style.op_txt}>여러분의 인스타계정</Text></TouchableOpacity> </View> </View> ) } const about_style = StyleSheet.create({ back_ground:{ flex:1, backgroundColor:'green', }, inner_view:{ flex:1, backgroundColor:"#fff", flexDirection:"column", alignItems:"center", borderRadius:50, margin:30 }, top_txt:{ marginTop:70, textAlign:'center', fontSize:30, fontWeight:"700", color:"#fff" }, guy_image:{ marginTop:50, width:160, height:160, borderRadius:30 }, inner_top:{ fontWeight:"700", fontSize:25, margin:10, padding:10, textAlign:"center" }, inner_mid:{ fontSize:15, fontWeight:"600", margin:10, padding:10, textAlign:"center" }, inner_op:{ backgroundColor:"orange", height:50, width:150, borderRadius:15, padding:10 }, op_txt:{ color:"#fff", textAlign:"center" } }); |
