Stock Quiz App (2) React Native

1. React Native

React Native는 React를 기반으로 한 오픈 소스 모바일 앱 프레임워크다. ios, android를 동시에 개발할 수 있다는 장점이 있다. javascript와 react에 대해 알고있다면 쉽게 익힐 수 있다.

2. Expo

Expo를 통해 React Native로 하는 앱 개발을 보다 쉽게 할 수 있다. Xcode나 Android Studio를 따로 설치할 필요없이 스마트폰에 앱을 설치해 앱을 직접 실행해 볼 수 있다. 아래 url의 사이트에서 관련 정보를 얻을 수 있다.

 

docs.expo.io/

Introduction to Expo - Expo Documentation

3. VSCode에서 React Native 프로젝트 개발하기

Visual Studio Code에서 React Native 프로젝트를 개발하기 위해 몇가지 환경설정이 필요하다.

1) Node.js 설치

사이트에 접속하여 Node.js를 설치한다.

nodejs.org/ko/

Node.js

2) Expo 설치

Node.js command prompt를 열어 npm install --global expo-cli 를 입력하면 Expo가 설치된다.

Node.js command prompt

expo 설치 완료

3) 프로젝트 생성

원하는 위치에 폴더를 생성한다. 직접 원하는 위치에 폴더를 생성하거나 창에서 명령어를 입력해 폴더를 생성한다. 바탕화면에 DTproject이름의 폴더를 생성했다.

폴더 생성

바탕화면에 폴더 생성

폴더를 생성했으면 cd명령어를 이용해 해당 폴더의 위치로 이동한다. 그리고 expo init DTproject(원하는 프로젝트 이름 입력)을 입력한다.

template 선택

원하는 Template을 클릭하면 프로젝트 생성이 완료된다.

프로젝트 생성 완료

4) 프로젝트 실행

프로젝트 폴더의 위치로 이동한 다음 expo start를 입력하면 프로젝트가 실행된다. 

프로젝트 실행

5) VS code에서 프로젝트 열기

Vs code에서 생성한 프로젝트의 폴더를 열어준다.

프로젝트 폴더 열기

VS code화면

4. Webview 설치

Webview를 사용하기 위해서 expo install react-native-webview명령어를 입력한다. 그러면 webview가 설치된다.

Webview설치

docs.expo.io/versions/latest/sdk/webview/

WebView - Expo Documentation

5. 소스 코드 작성

앱을 실행하면 팝업창(Modal)이 실행되고 버튼을 클릭하면 팝업창이 닫히고 Webview를 통해 html페이지가 열리도록 소스 코드를 작성했다.

1) App.js

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Alert, Modal, TouchableHighlight } from 'react-native';
import { WebView } from 'react-native-webview';


export default class App extends React.Component {
	state = {
    	modalVisible: false
  	};

  	setModalVisible = (visible) => {
    	this.setState({ modalVisible: visible });
  	}
	
	constructor(props){
		super(props);
		
		this.state={
			isIn : true,
		};
	}

  	render() {
		const isIn = this.state.isIn;
		const { modalVisible } = this.state;
	  	if(isIn){
		  return(
			
    		<View style={styles.centeredView}>
      			<Modal
        			animationType="slide"
        			transparent={true}
        			visible={modalVisible}
        			onRequestClose={() => {
         			Alert.alert('Modal has been closed.');
        		}}>
        		<View style={styles.centeredView}>
          			<View style={styles.modalView}>
            			<Text style={styles.modalText}>과도한 투자는 위험합니다.</Text>
						<TouchableHighlight
              				style={{ ...styles.openButton, backgroundColor: '#8796e6' }}
              				onPress={() => {
                 				
								this.setModalVisible(!modalVisible);
								this.setState({isIn : false});
              				}}>
              			<Text style={styles.textStyle}>닫기</Text>
            			</TouchableHighlight>
          				</View>
        			</View>
     			</Modal>
    		</View>
		
  		);}else{
			  // 여기에 html 주소 적기
			  return <WebView source={{ uri: '주소 입력' }} style={{ marginTop: 20 }} />;
		  }
  }
}


const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
	backgroundColor:'#5C73F2',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
	openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

2) Splash 

Splash화면은 앱 시작시 나타나는 창이다. assets폴더 안 splash.png이미지와 app.json파일에서 splash의 backgroundcolor를 변경했다.