리액트 네이티브에서 웹 소켓을 사용하기 위해서 node.js의 socket.io 또는 기본으로 제공하는 WebSocket을 이용해야한다.

처음에는 socket.io를 이용하여 구현하려고 시도했는데 잘되지 않아서 리액트 네이티브의 공식문서에서 제시하는 것처럼 WebSocket을 이용하여 구현하였다.

WebSocket 사용법

일단 웹 소켓 객체를 생성해야 하며, 인자로 주소를 적어준다.

1

const ws = new WebSocket('ws://<주소>');

각 상황에 사용할 함수들을 사용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 소켓 연결 시
ws.onopen = () => {
	ws.send('something'); // 메세지 전송
};

// 메세지 수신
ws.onmessage = e => {
	console.log(e.data);
};

// 에러 발생시
ws.onerror = e => {
	console.log(e.message);
};

// 소켓 연결 해제
ws.onclose = e => {
	console.log(e.code, e.reason);
};

[참고]
https://facebook.github.io/react-native/docs/network#websocket-support

실 기기에 테스트해볼 용도로 apk를 만드는 과정을 정리한다. 사실, 구글 플레이 스토어를 보면 스토어에 올려서 open하지 않고 테스트할 수 있다. 인증을 거치지않는다.

간단히 정리를 해보면 다음과 같다.

1. bundle 파일 생성
2. 안드로이드 스튜디오로 프로젝트 열기
3. apk 생성

1. bundle 생성

프로젝트 폴더에서 다음과 같이 입력한다. 각 옵션들이 제대로 적혀 있는지 본다. 간혹 코드의 시작점을 바꾸는 경우가 있는데, 만약 시작점은 변경했다면 –entry-file을 변경해주어야 한다.

1

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

2. 안드로이드 스튜디오로 프로젝트 열기

개발중인 리액트 네이티브 앱의 프로젝트 폴더를 연다.

3. apk 생성

프로젝트를 열었다면 안드로이드 스튜디오의 상단 Build 옵션에 들어가서 Build Bundle / APK를 확인한다. APK를 생성하기 위해 Build APK 클릭!

4. 생성된 APK 확인

APK 빌드가 완료되면 –assets-dest 옵션에서 명시한 경로에 app-debug.apk 파일이 생성된다.

• 경로 : /android/app/build/outputs/apk/debug/
• 파일명 : app-debug.apk

[참고]
https://webisfree.com/2018-09-17/react-native-standalone-%EB%B0%A9%EB%B2%95%EC%9C%BC%EB%A1%9C-apk-%EB%A7%8C%EB%93%A4%EA%B8%B0

모바일 어플리케이션을 만들다 보면 각 기기마다 다른 스크린 크기 때문에 머리아픈 경우가 정말 많은 것 같다. 코드로서 화면 크기를 구할 수 있는 방법이 있을까 찾아보았고 정리해본다.

화면크기 구하기

react-native의 Dimensions을 사용하면 된다. 현재 열린 윈도우 사이즈를 통해 height와 width를 구할 수 있다.

1
2
3
4

import { Dimensions } from 'react-native';

const chartHeight = Dimensions.get('window').height;
const chartWidth = Dimensions.get('window').width;

[참고]
https://stackoverflow.com/questions/53796007/react-native-flex-layout-with-victorychart-chart-fit-the-parent-container