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




