React Native - Hello World 출력 및 환경 설정

환경 설정

1.  node js 설치

 - LTS(안정화) 버전 

 - 설치시 , npm도 같이 설치됨 

2. Expo 설치

 - npm install -g expo-cli

 https://expo.io/ 

Expo

3. 파일 생성

 - expo init 파일명

 - 3가지 선택사항이 나오는데 상황에 맞게 선택(글쓴이의 경우 blank로 선택)

 

4. Hello World

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#00f',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    color: "#fff",
  }
});

Expo 환경

웹 브라우저로 본 결과물