Androidナビゲーションバー を非表示にするにはどうすればよいですかReact Native?
ナビゲーターコンポーネントに付属しているページの上部にあるコンポーネントではなく、ソフトウェアの戻るボタンとホームボタンがある画面下部のバーを指します。
Android.comのこのページ はネイティブデベロッパー向けの方法を説明しています。 Reactネイティブアプリを使用して、これを達成する方法を誰かが説明できますか?ありがとう。
これを永続的に実現したい場合は、アプリが作成されたとき、およびフォーカスが戻ったときに、Navbarを非表示にする必要があります。
これを行うには、これをMainActivity.Java
:
...
import Android.os.Bundle;
import Android.view.View;
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
hideNavigationBar();
}
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
hideNavigationBar();
}
}
private void hideNavigationBar() {
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
}
}
これを「没入型」にして、ユーザーが画面の下から引いてナビゲーションバーにアクセスできるようにすることもできます。そのためには、View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
国旗:
...
import Android.os.Bundle;
import Android.view.View;
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
hideNavigationBar();
}
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
hideNavigationBar();
}
}
private void hideNavigationBar() {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}
その他のオプションは Androidドキュメント にあります。
Martin Konicekの答えに基づいて構築:
私は先に進んで、必要なパッケージとモジュールをここに書きました: https://Gist.github.com/dhrrgn/16a8dfa7581a682627c6
getPackages
メソッドの_MainActivity.Java
_ファイルに追加し、次のようにReactActivityオブジェクトをパッケージに送信する必要があります:new NavigationBarAndroidPackage(this)
注:コードはテストされていませんが、動作するはずです(最初の行のpackage
を変更する必要があります)。送信したリンクで提供されているサンプルコードを例として使用しました。必要に応じて変更します。
Androidナビゲーションバーを非表示にするには、react-native-navigation-bar-color
ナビゲーションバーを表示または非表示にできます。詳細については、ドキュメント[ここ] [1]を参照してください。ネイティブコードをリンクする必要があるため、Expoではnotが機能することに注意してください。
インストールはかなり簡単です:
npm install react-native-navigation-bar-color --save
次に、パッケージをリンクする必要があります。
react-native link react-native-navigation-bar-color
これを実行したら、次のように使用できます。
import {
HideNavigationBar,
ShowNavigationBar,
} from 'react-native-navigation-bar-color';
次に、使用するナビゲーションバーを表示する場合
ShowNavigationBar();
そしてそれを隠すためにあなたは使うことができます:
HideNavigationBar();
JavaScriptからこれを行うための組み込みAPIはありません。
良いニュースはReact Nativeにあります。ネイティブモジュールを作成することで、ネイティブ機能をJavaScriptに公開できます。 ドキュメント を参照してください。
このようにして、NavigationBarAndroid.hide()
のようなJS関数を提供し、リンク先のAPIを呼び出させることができます。
これを使用してください: https://github.com/Anthonyzou/react-native-full-screen
使用法:
import FullScreen from 'react-native-full-screen'
FullScreen.onFullScreen()
FullScreen.offFullScreen()
Im Android 9と私はテストしました
import {HideNavigationBar} from 'react-native-navigation-bar-color';
ただし、Altキーを押して別のアプリにタブ移動して戻ると、ナビゲーションバーが再び表示されます。
現時点までの私にとっての最善の解決策は、
ルイザワズキ
それを私のmainactivity.Javaにコピーすると問題なく動作し、変更後は常に非表示になります。