[React Native]Android FullScreen(전체화면) 적용하기

회사에서 키오스크용 Android 앱 개발하며 풀 스크린을 적용할 일이 생겨 적용하게 되었고 , 
Android 네이티브 쪽으로 검색하면 나오긴 하지만 RN 키워드와 함께 검색하면 나오지 않았기에 ,, 공유하고자 작성한다.

사실 에뮬상에서 보기에만 적용하려면 

에뮬 설정에서

해당 부분 체크만 하면 되긴하지만 ,
실제 서비스상에선 적용되지 않으므로 직접 Andorid 네이티브 파일을 수정해야 했다.

 

xml 수정하기

- android/app/src/main/res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>
    <!-- 아래 코드 추가 -->
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

- android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
>

    <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme.NoActionBar"> <!-- AppTheme.NoActionBar로 변경 -->
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>
</manifest>

- android/app/src/main/java/com/${appName}/MainActivity.java

import android.view.View;

상단에 import 후 아래 코드를 추가 해준다.

@Override
  protected void onCreate(Bundle savedInstanceState) {
  	// 아래 코드 추가
    super.onCreate(savedInstanceState);

    View decorView=getWindow().getDecorView();
    int uiOptions= View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
              |View.SYSTEM_UI_FLAG_FULLSCREEN;
    decorView.setSystemUiVisibility(uiOptions);

  }

적용된 스크린

수고하셨습니다.