今回は、React Native で Android のナビゲーションバーを非表示にする方法についてです。
今まで要望がなかったので知らなかったのですが、なんとライブラリがありました。
「react-native-system-navigation-bar」というライブラリで、GitHub のページはこちらです。
GitHub – kadiraydinli/react-native-system-navigation-bar: React Native lets you customize the navigation bar for Android.
https://github.com/kadiraydinli/react-native-system-navigation-bar
ライブラリは、下記コマンドでインストールします。
npm install react-native-system-navigation-bar --save
上記コマンドが実行できたら、あとは任意の場所にコードを追加するだけです。
単純に、ナビゲーションバーを非表示にするだけなら、下記を追加すればOKです。
import SystemNavigationBar from 'react-native-system-navigation-bar'; SystemNavigationBar.navigationHide();
ただ、上記のメソッドでは、一度消したら再表示されないため、再度ナビゲーションバーを表示させるには、下記を実行する必要があります。
SystemNavigationBar.navigationShow();
そのため、個人的には下記の「アプリ優先型没入モード」がよいのではないかと思います。
SystemNavigationBar.stickyImmersive();
こちらのモードでは、ユーザーが画面の端からスワイプするとシステムバーが表示されますが、しばらくすると自動的に再度非表示になります。
そのため、必要な時だけナビゲーションバーを表示できるかと思います。
他にもいくつかモードは用意されているので、アプリの仕様に合わせて任意のメソッドを使用してください。
なお、表示/非表示だけでなく、setNavigationColor() メソッドを使用すれば、ナビゲーションバーの色を変更することもできるようです。
以上、React Native で Android のナビゲーションバーを非表示にする方法についてでした。
ご参考になれば幸いです。
