web-dev-qa-db-ja.com

アイコン（画像、ロゴ..）をステータスバーに追加する方法

このドキュメントのように、StatusBarコンポーネント（React Native）に任意の種類のアイコンまたはロゴを含めるための小道具がないことに気づきました： https://facebook.github.io/react-native/docs/ statusbar.html＃statusbar

アプリがバックグラウンドで実行されている間、ネットワークバーの横にアイコン（または幅x高さの小さな正方形）を継続的に表示したいと思います。ビューコンポーネントをステータスバーと組み合わせて、次のような小さな赤い長方形を作成してみました。

      <View style={styles.container}>
        <StatusBar
          backgroundColor="blue"
          barStyle="light-content"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   width: 20,
   height: 20,
   backgroundColor: 'red'
  }
})

ただし、ステータスバーの下に赤い四角が表示されました。何か案は？

編集：アプリがバックグラウンドにある場合でも、ステータスバーにアプリのロゴを表示したいのです。 （VPNおよび位置情報サービスを提供するアプリはこれを時々行います） these are the common icons we see on our status bar but I want to make my own and place it there, say for ex a red circle or any image for that matter..

androidiosreact-nativestatusbar
16
Sarah cartenz

IOSの場合、ステータスバーにカスタムアイコンを追加することはできません。Appleでは許可されていません。

Androidの場合、Notification and NotificationManagerを使用する必要があります。アプリの起動時にこれを行うJavaにネイティブモジュールを記述してください。React Nativeを使用すると、Javaで記述されたNative Moduleを呼び出すことができます。こちらをご覧ください https://facebook.github.io/react-native/docs/native-modules-Android.html

通知についてもこれを読む必要があります バックグラウンドを含め、アプリケーションの実行中にステータスバーにアイコンを表示する方法は？

3
Gabriel Diez

Androidステータスバーには2種類のアイコンがあります。

1つの種類は、framework-res.apkから取得され、/ system/frameworkに抽出されるシステムアイコンです。デバイスでいくつかの昇格された特権を持たず、システムイメージの読み取り/書き込みをマウントせずにそれらを変更します。

もう1つは、前述の通知アイコンです。 iOSの場合、実際にはあまり変更できません。

スクリーンショットは両方の種類を示しており、ネットワークバーアイコンの横にアイコンを配置したいのですが、これらはシステムアイコンです（Androidの場合）

ここにプラグインがあります 両方のプラットフォームの通知（および通知アイコン）を処理し、すべてをラップし、reactで簡単に使用できますiOS通知のサンプルネイティブコードを見つけることができます ここ およびAndroid ここ ：

1
ApriOri

ステータスバーを変更することはできません。 Appleでは、ステータスバーの外観のみを変更できます。iOSアプリの場合、外観をグローバルに変更することで問題が解決する場合があります。

ReactNativeによって生成された.xcprojファイルを開きます。

  1. Info.plistで、「コントローラーベースのステータスバーの外観を表示する」をブール値に設定する必要があります。
  2. nOに設定するAppDelegateでスタイルを設定し、このコードをdidFinishLaunchingWithOptions関数に追加します：UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.LightContent, animated: true)
0
Fede Henze