~4.4까지의 강의
expo를 얘기하고 어떻게 앱을 공유하는지에 대해서 알아보도록 하자.
어떻게 프로젝트를 publish할 수 잇을 까?
그것은 expo로 가서 위의 버튼을 눌러주면 된다.
그러면 모든 사람과 코드를 공유할 수 있다.
그럼 어플리케이션 이름을 적고 publishing을 누르면 된다.
이 작업은 React.js를 평범한 JS로 바꿔주는 것이다.
그리고 이것은 expo로 간다.
링크에 접속해서 바로 다운받을 수 있다.
이것은 test를 위한 것이다.
React Native Web에서는 view를 div로 바꾼다.
리액트 네이티브를 가지고 가서, js처럼 변경해준다.
expo로 한 것을 웹사이트로도 만들 수 있다는 것이다.
run with browser를 클릭해보자.
가끔 storage가 null이면 오류가 생기고는 한다.
나 왜안돼....😂 해결방법 아는 사람 나타나주길!
이제 버그 몇개를 고쳐보도록 하고, 앱 아이콘에 대해서 말해보도록 하자.
expo는 우리가 원하는 것들을 가지고 있다.
stylesheet를 쓰는 대신에, btnText를 실제로 고치는 것이다.
기본적으로 앱의 업데이트 부분을 업로드 한다.
그러면 다시 publish를 누르면 된다.
그런데 나는 web이 안되서 이 부분을 잘 모르겠다.
어플 아이콘
assets에 들어가면 splash screen이 있는데 이것은 앱이 로드될 때 마다 우리가 보는 것이다.
favixon은 웹
adaptive-icon은 안드로이드에서 보인다.
이제 웹에 있는 문제를 해결해보자. (나는 확인할 수도 없지만)
그냥 안되서 에러는 없지만 클릭을 해도 실행되지 않는 것들이 있다
그래서 플랫폼에서 직접 불러오는 API를 사용해야 한다.
우리가 어떤 플랫폼에 있는지 알 수 있다.
플랫폼을 import했으니까 플랫폼 os를 체크를 한다.
const deleteToDo = (key) => {
if(Platform.OS === "web"){
const ok = confirm("Do you want to delete this To Do?")
if(ok){
const newToDos = { ...toDos };
delete newToDos[key];
setToDos(newToDos);
saveToDos(newToDos);
}
}
else{Alert.alert("Delete To Do", "Are you sure?", [
{ text: "Cancel" },
{
text: "I'm Sure",
style: "destructive",
onPress: () => {
const newToDos = { ...toDos };
delete newToDos[key];
setToDos(newToDos);
saveToDos(newToDos);
},
},
]);}
};
이제 앱스토어에 배포하는 방법을 알아보도록 하자.
어떻게 build를 해야하는지 알아보도록 하자.
expo build:android 를 한다. 몇 가지 나오는데 그냥 클릭하면 된다.
그럼 알아서 expo 서버에 코드를 보내고 있는 것이다.
iOS를 하고 싶으면 expo build:ios를 하면 된다.
React Native for Windos+macOS는 마이크로소프트가 만든 것이다.
그리고 scene component를 사용해서 VR도 만들 수 있다.
이제 웹사이트를 웹에 배포하자.
1. npm i gh-pages
2. package.json으로 가서 scripts에
"deploy": "gh-pages -d web-build",
"predeploy": "expo build:web"
3. npm run deploy
그런데 나는 안된다 아마 웹은 오류가 난 것같다.
그리고 파일을 다운받아서 앱스토에 배포해보자.
마찬가지로 ios도 만들 수 있다.
그리도 돈주면 실제로 어플을 보낼 수 있다.
'Application > React Native' 카테고리의 다른 글
[React Native 101] #6. Persist&Delete (0) | 2022.07.25 |
---|---|
[React Native 101] #5. Touchables&TextInput&Todos (0) | 2022.07.25 |
[React Native 101] #4. Location & Weather & Icons (0) | 2022.07.21 |
[React Native 101] #3. Styles (2) | 2022.07.18 |
[React Native 101] #2. Rules & Packages (0) | 2022.07.18 |
댓글