expo가 아직 정확히 뭔지 모르겠다. 결국 윈도우에서 ios앱을 만들 수 있다는건지... 일단 한계까지 시도해보려고 한다.
테스트 핸드폰은 아이폰XR이다.
그리고 expo에 필요한 것들을 모두 설치하고 진행한 상태다. node.js 등등
vscode를 프로젝트 생성하려는 폴더에서 실행하여 터미널로 다음을 입력한다.
expo init lesson02
여기서 lesson은 원하는 프로젝트 명으로 자유롭게 바꾼다.
그리고 blank 클릭
그러면 인스톨이 된다. 그 후 터미널에서 cd lesson02를 입력하고 확인해보면
이런 폴더 구조를 가지게 되는데 아직 잘은 모르겠다. 어디서 들었는데 npm start를 하게 되면 package.json의 어느 부분을 보고 실행한다고 하는거라고는 함. 그 후 App.js부분을 아래와 같이 수정해본다.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
state={
year:2016,
name:"Harry",
colors:['blue'],
}
return (
<View style={styles.container}>
<Text>My name is: { this.state.name}</Text>
<Text>The year is: { this.state.year}</Text>
<Text>The color is: { this.state.colors[0]}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
그리고 터미널에
npm start
를 입력하면 서버 관리 페이지 같은 것이 나오는데 그 것의 큐알을 핸드폰으로 찍어보면 결과를 확인할 수 있다.
잠시 멈춤 (2) | 2021.03.28 |
---|---|
[ React-Native ] 생명주기 메서드 (0) | 2021.03.22 |
[ React-Native ] Props ( state와의 차이) (0) | 2021.03.14 |
[ React-Native ] setState를 이용해서 텍스트 변환 & 조건부 변환 (0) | 2021.03.07 |