Expo 환경 구축
6428 단어 React NativeExpotech
1: 이른바 ReactNative
크로스오버 플랫폼 개발(iOS, Android)
일반적으로 expo나react-native-cli를 사용하여 개발한다.
expo
제한은 있지만 기본적으로 문제가 없다.그러나react-native-cli보다 더 간단하다.
eject를 진행하면 expo의 제한을 초과하지만 위험도 있습니다.
react-native-cli
무제한
이번에 우리는 그 expo의 개발 환경을 구축할 것이다.
먼저
윈도우즈 분들은 이거 참고하셔도 될 것 같아서요.
PlayGround
2:Node.JS 설치
공식적으로 최신 버전을 추천하지만 안정판도 문제없다.
v10.9.0도 확인했어요.
3:expo-cli 설치
npm install expo-cli --global
4:create an app
expo init myNewProject
cd myNewProject
expo start
expo init에서 템플릿을 선택해야 하는데 첫 번째라면 가장 좋은 건 OK
expo start에 있습니다.포트 열기
4-a: 팩시밀리로 확인하고 싶을 때
expo.io/learn에서 왔습니다.
Open the Expo development client on your device. Scan the QR code printed by expo start with Expo Client (Android) or Camera (iOS). You may have to wait a minute while your project bundles and loads for the first time.
사용 중인 터미널에서 엽니다.로컬 호스트가 표시하는 왼쪽 아래에 있는 QR 코드를 읽고 이쪽에서 방법을 생각해 보세요!멋있다고 했어요.
번들부터 로드까지 1분 정도 소요될 것 같습니다.
아이폰 사용자, AppStore
http://localhost:19002/
안드로이드 여러분, 구글플레이.
Open up App.js to start working on your app!
그러면 오케이!
4-b: 시뮬레이터/시뮬레이터를 통해 확인하고 싶을 때
Mac
XCode 필요
Android
AndroiStudio 설치 필요
Q: XCode에서 다음 오류가 발생하면...
Error running `xcrun simctl list devices --json`: xcrun: error: unable to find utility "simctl", not a developer tool or in PATH
그럼, 내가 해결할게.
XCode > References > Locations
에서 Command Line Tools에서 선택할 수 있는 장치를 설정합니다.선택할 수 있는 장치가 없으면 원래 장치가 설치되어 있지 않기 때문에 버젼이 지정한 장치를 설치하는 것을 추천합니다.
Q: 안드로이드 스튜디오에 오류가 발생하면
자신이 실기로 확인했기 때문에 아직 시뮬레이터를 제대로 사용하지 않았다는 점은 참고 가치가 있다.udemy의 사람들도 같은 부분을 설명했다.
빠른 운행을 원할 때
expo start 이후
왼쪽 가운데 Run in 웹 브라우저에서 확인할 수 있습니다.
여기서부터 실기 한번 돌려봐.
5:스타일 바꾸기
App.다음 방식으로 js를 수정하면 색상과 글꼴 크기가 변경됩니다
<Text style={{color:'#267c7c', fontSize: 18}}>Open up App.js to start working on your app!</Text>
6: 이미지 액세서리
기본적으로 준비된 asset의 그림을 출력해 보십시오
4
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import logo from './assets/splash.png';
export default function App() {
return (
<View style={styles.container}>
<Text style={{color:'#267c7c', fontSize: 18}}>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<!-- ここでの305は305px -->
<Image source={logo} style={{ width: 305, height: 159 }} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
<Image source={{ uri: "https://i.imgur.com/TkIrScD.png" }} style={{ width: 305, height: 159 }} />
7: 만들기 단추
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Image source={{ uri: 'https://i.imgur.com/TkIrScD.png' }} style={styles.logo} />
<Text style={styles.instructions}>
To share a photo from your phone with a friend, just press the button below!
</Text>
<TouchableOpacity
onPress={() => alert('Hello, world!')}
style={{ backgroundColor: 'blue' }}>
<Text style={{ fontSize: 20, color: '#fff' }}>Pick a photo</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
width: 305,
height: 159,
marginBottom: 20,
},
instructions: {
color: '#888',
fontSize: 18,
marginHorizontal: 15,
marginBottom: 10,
},
});
다음은 Expo 설명서부터 시작하십시오.
Tips --offline
옵션을 추가하여
JS의 구축 속도가 빨라지는 것은 시뮬레이터/시뮬레이터를 통해 확인할 때의 고속화와 관련이 있다.
참고 문장
Expo
React Native Expo CLI로 시작한 플랫폼 간 개발 단계
Reference
이 문제에 관하여(Expo 환경 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/soiree/articles/sample-article텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
