RN Expo 리액트 네이티브 안드로이드 빌드

아고라 UIKit API 적용을 위해 기본 Expo 파일 1개를 수정합니다.

 

• app/(tabs)/index.jsx 파일

import React, { useState } from 'react';
import { Image, StyleSheet, Platform, Text, View } from 'react-native';

import 'expo-dev-client';
import AgoraUIKit from 'agora-rn-uikit';


export default function HomeScreen() {
 
  const [videoCall, setVideoCall] = useState(true);
  const connectionData = {
    appId: '아고라 앱 아이디',
    channel: '아고라 앱 아이디의 생성 채널명',
  };
  const rtcCallbacks = {
    EndCall: () => setVideoCall(false),
  };

  return (
    <View style={{ flex: 1, flexDirection: 'column' }}>
      <View style={{ flex: 0.5, backgroundColor: 'red' }}>
        <Text>Item 1</Text>
      </View>
      <View style={{ flex: 0.5, backgroundColor: 'blue' }}>
        {videoCall ? (
          <AgoraUIKit connectionData={connectionData} rtcCallbacks={rtcCallbacks} styleProps={{ UIKitContainer: {marginTop: '100px', height: '50%', width: '100%'}}}/>
        ) : (
          <Text onPress={()=>setVideoCall(true)}>Start Call</Text>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
});

 

그리고 일단 노드 제이에스 프로젝트 루트에서 다음 명령어로 빌드를 수행합니다.

npm run android

 

그럼 안드로이드 폴더가 프로젝트 루트에 생기는데 안드로이드 폴더 루트 안에 local.properties 파일을 새로 생성하고 파일 내용을 다음과 같이 적습니다.

 

 

이때 ndk 버전은 안드로이드 폴더가 생성되는 것을 일단 지켜본 후 그레이들 설정에서 찾아냅니다.

 

그리고 꼭 package.json 파일 내 아고라 API 관련 오픈소스 3개가 등록되어 있는지 확인합니다.

"react-native-agora": "^4.3.1",
"agora-rn-uikit": "^5.0.2",
"agora-react-native-rtm": "^1.5.1"

 

끝났습니다. 다시 빌드합니다. 그럼 정상적으로 작동합니다.

npm run android