이국진의 개발블로그

프로젝트를 생성하고 splash를 만드는데 필요한 것들을 자동으로 만들어주는 react-native-make 모듈을 설치합니다.

react-native-make 모듈을 통해 이미지를 추가하고 react-native-splash-screen 모듈을 설치하여 splash를 컨트롤 합니다.

1. npm i -D @bam.tech/react-native-make

2. splash에 쓰일 이미지를 프로젝트 내에 경로에 저장

3. 명령어 입력 - react-native set-splash --path ./Assets/images/splash.png --resize cover --background "#FFFFFF"

4. npm i react-native-splash-screen --save

5. pod install

6. ios -> AppDelegate.m 에서 소스코드 추가 

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

7. android -> MainActivity.java 에서 소스코드 추가

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

8. app.js에서 componentDidMount 안에 SplashScreen.hide(); 추가

import React from 'react';
import { Text } from 'react-native';
import SplashScreen from 'react-native-splash-screen'

export default class App extends React.Component {
  componentDidMount() {
    SplashScreen.hide();
  }

  render() {
    return (
      <Text>hello world</Text>
    )
  }
}

* IOS에서는 가상 기기를 시뮬레이터(simulator)라고 하고 Android에서는 가상기기를 에뮬레이터(emulator)라고 합니다.

Expo를 버리고 React Native만으로 처음하는 프로젝트에서부터 IOS 시뮬레이터에서는 정상작동하던 프로젝트가 Android에서는 오류를 내면서 정상작동하지 않는 상황이 발생했습니다. 에뮬레이터가 정상적으로 실행되지만 에뮬레이터 안에 앱이 설치가 되지 않으면서 에러가 발생했는데요. 안드로이드 환경설정이 잘못된 것으로 판단되서 계속 세팅을 확인하면서 시간을 낭비하게 됐습니다.

error Failed to install the app. Make sure you have the Android development 
environment set up: https://reactnative.dev/docs/environment-setup. 
Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

계속 되는 구글링 결과 gradle이 문제라는 것을 확인했습니다.

React Native 프로젝트 안에 /android/gradle/wrapper/gradle-wrapper.properties 파일로 이동하여 distributionUrl로 시작하는 라인에서 gradle 버전을 변경해주고 재시작하면 오류 없이 정상작동하는 것을 확인할 수 있습니다.

아래와 같은 버전을

distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip

다음과 같이 변경합니다.

distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

출처 : https://stackoverflow.com/questions/60844245/how-solve-could-not-initialize-class-org-codehaus-groovy-reflection-reflectionc/61913747#61913747