web-dev-qa-db-ja.com

非表示AndroidナビゲーションバーReactネイティブ

Androidナビゲーションバー を非表示にするにはどうすればよいですかReact Native？

ナビゲーターコンポーネントに付属しているページの上部にあるコンポーネントではなく、ソフトウェアの戻るボタンとホームボタンがある画面下部のバーを指します。

Android Navigation Bar

Android.comのこのページ はネイティブデベロッパー向けの方法を説明しています。 Reactネイティブアプリを使用して、これを達成する方法を誰かが説明できますか？ありがとう。

androidreact-nativenavigationbar
12
Axeva

これを永続的に実現したい場合は、アプリが作成されたとき、およびフォーカスが戻ったときに、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ドキュメント にあります。

9
Louis Zawadzki

Martin Konicekの答えに基づいて構築：

私は先に進んで、必要なパッケージとモジュールをここに書きました： https://Gist.github.com/dhrrgn/16a8dfa7581a682627c6

getPackagesメソッドの_MainActivity.Java_ファイルに追加し、次のようにReactActivityオブジェクトをパッケージに送信する必要があります：new NavigationBarAndroidPackage(this)

注：コードはテストされていませんが、動作するはずです（最初の行のpackageを変更する必要があります）。送信したリンクで提供されているサンプルコードを例として使用しました。必要に応じて変更します。

6
Dan Horrigan

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();
4
Andrew

JavaScriptからこれを行うための組み込みAPIはありません。

良いニュースはReact Nativeにあります。ネイティブモジュールを作成することで、ネイティブ機能をJavaScriptに公開できます。 ドキュメント を参照してください。

このようにして、NavigationBarAndroid.hide()のようなJS関数を提供し、リンク先のAPIを呼び出させることができます。

1
Martin Konicek

これを使用してください： https://github.com/Anthonyzou/react-native-full-screen

使用法：

import FullScreen from 'react-native-full-screen'
FullScreen.onFullScreen()
FullScreen.offFullScreen()
1
Croolsby

Im Android 9と私はテストしました

import {HideNavigationBar} from 'react-native-navigation-bar-color';

ただし、Altキーを押して別のアプリにタブ移動して戻ると、ナビゲーションバーが再び表示されます。

現時点までの私にとっての最善の解決策は、

ルイザワズキ

それを私のmainactivity.Javaにコピーすると問題なく動作し、変更後は常に非表示になります。

0
Edison Sanchez