2

我的目标是让应用程序在 Android 和 iPhone 中全屏显示状态栏，就像在 Expo 中一样，但在 React Native 中

这是正在发生的事情：

我的目标是删除这个灰色部分，让应用程序占据这部分，同时显示状态栏，就像在 Expo 中一样。

我已经尝试过了：https ://reactnative.dev/docs/statusbar.html#sethidden

但是所有的灰色顶部都变成了黑色并且没有状态栏

我已经尝试将其添加到 Android 中的 styles.xml 中：

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

但什么都没改变（并且只适用于 Android）

4

5 回答 5

6

开箱即用的选项。

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

class MyComponent extends Component {

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

或者另一种方法是在 android中使用真正的沉浸式模式。您可以采用本机方法或找到执行此操作的任何 RN 模块。

于 2020-08-01T04:30:31.360 回答
0

使用 react-native-fullscreen-chz

yarn add 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

于 2021-07-25T05:58:29.530 回答
0

将此代码添加到您的 Android 原生 mainActivity onCreate 方法中

/**
 * For fullscreen mode
 */
@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    if (hasFocus) {
        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);
    }
}

像这样

像这样

于 2021-10-15T09:55:02.500 回答
0

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

import { StatusBar } from 'react-native';

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

     return(...);
}

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

于 2020-09-14T14:46:56.387 回答
0

如果只有安卓。

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

// 全屏包.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()应该适合你。

于 2021-02-01T06:18:53.033 回答