You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React Native应用添加横屏专属沉浸模式(全屏无导航栏)技术咨询

React Native 横屏时启用沉浸模式(全屏无导航栏)解决方案

嘿,你已经走在正确的路上啦!要实现仅横屏模式下开启沉浸全屏的需求,咱们得把原生代码调整得更精准,同时处理好横竖屏切换的场景,避免出现适配问题。下面是完整的实现方案:

一、完善 MainActivity.java 代码

我们需要监听屏幕方向变化,只在横屏时设置沉浸模式,竖屏时恢复正常状态,同时兼顾不同Android版本的兼容性(API 30+弃用了旧的SYSTEM_UI_FLAG,需要用WindowInsetsController替代)。

import android.os.Build;
import android.view.View;
import android.view.WindowInsetsController;
import android.content.res.Configuration;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "YourAppName"; // 替换成你的应用组件名
  }

  @Override
  protected void onStart() {
    super.onStart();
    // 初始化时检查当前方向,设置对应UI模式
    updateSystemUIMode(getResources().getConfiguration().orientation);
  }

  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    // 横竖屏切换时更新UI模式
    updateSystemUIMode(newConfig.orientation);
  }

  private void updateSystemUIMode(int orientation) {
    if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
      // 横屏时启用沉浸模式
      enableImmersiveMode();
    } else {
      // 竖屏时恢复正常UI
      disableImmersiveMode();
    }
  }

  private void enableImmersiveMode() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
      // Android 11+ 适配
      getWindow().getInsetsController().hide(
        WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
      );
      getWindow().getInsetsController().setSystemBarsBehavior(
        WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
      );
    } else {
      // Android 10及以下版本
      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
      );
    }
  }

  private void disableImmersiveMode() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
      // Android 11+ 恢复系统栏
      getWindow().getInsetsController().show(
        WindowInsetsController.BEHAVIOR_SHOW_BARS_BY_TOUCH
      );
    } else {
      // Android 10及以下版本恢复正常UI
      getWindow().getDecorView().setSystemUiVisibility(
        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
      );
    }
  }
}

二、配置 AndroidManifest.xml

别忘啦,要在你的Activity标签里添加configChanges属性,避免横竖屏切换时重启Activity,这样我们的方向监听才能正常工作:

<activity
  android:name=".MainActivity"
  android:configChanges="orientation|screenSize|smallestScreenSize|keyboard|keyboardHidden|navigation"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize">
  <!-- 其他原有配置 -->
</activity>

三、额外优化建议

  • 视频交互增强:如果是视频播放场景,你可以在原生层添加触摸监听,让用户点击屏幕时临时显示系统栏,再次点击隐藏,提升观看体验。
  • RN层联动:如果需要从RN侧主动触发沉浸模式(比如播放视频时强制横屏并全屏),可以通过NativeModules调用原生方法,实现跨层通信。
  • 多机型测试:不同Android厂商可能对系统栏有自定义适配,记得在多台设备上测试,确保效果一致。

内容的提问来源于stack exchange,提问作者Nieck

火山引擎 最新活动