新手機中的 React Native 應用程序“全屏”

Question

我的目標是讓應用程序全屏顯示狀態欄，在 Android 和 iPhone 中，就像在 Expo 但在 React Native 中一樣

這是正在發生的事情：

我的目標是刪除這個灰色部分，讓應用程序占據這部分，同時顯示狀態欄，就像在 Expo 中一樣。

我已經試過這個： https://reactnative.dev/docs/statusbar.html#sethidden

但是所有的灰色頂部都變成了黑色並且沒有狀態欄

我已經嘗試將此添加到 Android 中的 styles.xml 中：

<item name="android:windowFullscreen">true</item>

但什么都沒改變（並且只適用於 Android）

Answer 1

開箱即用的選項。

import React, { Component } from 'react';
import { StatusBar } from 'react-native';

class MyComponent extends Component {

    componentDidMount() {
       StatusBar.setHidden(true);
    }
}

或者另一種方法是在 android 中使用真正的沉浸式模式。 您可以使用 go 進行本機方法，也可以找到執行此操作的任何 RN 模塊。

Answer 2

您可以使用 StatusBar 來設置這些選項，如下所示：

import { StatusBar } from 'react-native';

export default function App() {
    React.useEffect(() => {
      StatusBar.setBackgroundColor('#FF573300'); 
      StatusBar.setTranslucent(true)
     }, []);

     return(...);
}

顏色代碼中的最后一個零表示不透明度

Answer 3

如果它只有 android。

1- 創建FullScreenModule.java and FullScreenPackage.java並將它們放在android/app/main/java/com/Your-App-Name下

// FullScreenModule.java

package com.your-app-name;
import android.view.View;
import android.app.Activity;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.UiThreadUtil;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;


public class FullScreenModule extends ReactContextBaseJavaModule {
    @Override
    public String getName() {
        return "FullScreen";
    }

    @ReactMethod
    public void enable() {
        UiThreadUtil.runOnUiThread(
            new Runnable() {
                @Override
                public void run() {
                    getCurrentActivity().getWindow().getDecorView().setSystemUiVisibility(
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
                        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
                        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                        View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
                        View.SYSTEM_UI_FLAG_FULLSCREEN |
                        View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                    );
                }
            }
        );

    }

    @ReactMethod
    public void disable() {
        UiThreadUtil.runOnUiThread(
            new Runnable() {
                @Override
                public void run() {
                    getCurrentActivity().getWindow().getDecorView().setSystemUiVisibility(
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    );
                }
            }
        );

    }

    FullScreenModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
}

和FullScreenPackage.java

// FullScreenPackage.java

package com.your-app-name;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class FullScreenPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new FullScreenModule(reactContext));

    return modules;
  }

}

接下來在你的MainApplication.java把那些

import com.your-app-name.FullScreenPackage;

並在getPackages() packages.add(new FullScreenPackage());

最后在包含的地方創建fullScrean.{js or tsx}文件

import {NativeModules} from 'react-native';
module.exports = NativeModules.FullScreen;

現在導入模塊import FullScreen from './fullScrean';

然后簡單的FullScreen.enable() / FullScreen.disable()應該適合你。

Answer 4

使用 react-native-fullscreen-chz

yarn add react-native-fullscreen-chz

import FullScreenAndroid from 'react-native-fullscreen-chz'

FullScreenAndroid.enable();

Styles.xml

android\app\src\main\res\values\styles.xml

<resources xmlns:tools="http://schemas.android.com/tools">
        <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
            <item name="android:textColor">#000000</item>
    
             <!-- Add this line for notched devices. -->
            <item name="android:windowLayoutInDisplayCutoutMode" tools:ignore="NewApi">shortEdges</item> 
        </style>
    </resources>

更多信息： react-native-fullscreen-chz

Answer 5

將此代碼添加到您的 Android Native mainActivity onCreate 方法中

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

像這樣