在新手机中反应本机应用程序“全屏”

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中使用true Immersive mode。您可以采用本机方法，也可以找到可以做到这一点的任何RN模块。

Answer 2

您可以使用StatusBar设置这些选项，如下所示：

import { StatusBar } from 'react-native';

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

     return(...);
}

颜色代码中的最后一个零表示不透明度

Answer 3

如果只有安卓。

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

<块引用>

纱线添加 react-native-fullscreen-chz

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

FullScreenAndroid.enable();

样式.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