如何将图标（图片、标志）添加到状态栏

Question

我注意到StatusBar组件（React Native）没有提供类似于文档中的图标或徽标的props： https://facebook.github.io/react-native/docs/statusbar.html#statusbar

我希望应用在后台运行时，可以在网络栏旁边连续显示一个图标（甚至只是一个小的宽x高的正方形）。我尝试将View组件与StatusBar组件组合使用，创建一个小的红色矩形，如下所示：

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

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

然而，红色的正方形只出现在状态栏下面。 有什么想法吗？

编辑： 我的目标是即使应用程序在后台运行，也要在状态栏中使用我的应用程序标志（提供VPN和位置服务的应用程序有时会这样做）。

- Sarah cartenz

---

你能添加一个截图来演示你的意思吗？ - Amir Uval

在Android上，除了通知之外，您没有办法将任意图标放置在状态栏上。 - CommonsWare

请查看此问题：<a href="https://dev59.com/lm865IYBdhLWcg3wIa7M">如何在应用程序运行时（包括后台），在状态栏中显示图标？</a> - Behnam Eskandari

很遗憾，iOS不允许应用程序在状态栏中添加自定义图标。 - Sparga

@Sparga 这很奇怪，因为我见过他们这样做，尤其是与 VPN 应用程序相关的情况。 - Sarah cartenz

Answer 1

对于iOS系统，无法在状态栏中添加任何自定义图标，苹果公司不允许。

对于Android系统，您应该使用通知(Notification)和通知管理器(Notification Manager)。只需编写一个Java本地模块，在您的应用程序启动时执行此操作。 React Native允许您调用使用Java编写的本地模块，请在这里查看 https://facebook.github.io/react-native/docs/native-modules-android.html。

您还应阅读此内容以获取有关通知(Notification)的信息 如何在应用程序运行时（包括后台）在状态栏中显示图标？

- Gabriel Diez

Answer 2

在Android状态栏中有两种图标。

一种是系统图标，来自于framework-res.apk并提取到/system/framework，您无法更改这些图标，除非在设备上拥有某些提升的权限并将系统映像挂载为读/写。

另一种是之前提到的通知图标。 对于iOS，您实际上不能改变太多。

您的屏幕截图显示了这两种类型，并且您想将您的图标放在网络信号图标旁边，但这些都是系统图标（在Android上）。

这里有一个插件Here is a plugin，它处理了通知（和通知图标）两个平台，并将所有内容包装起来，易于在React中使用。您可以在此处找到iOS通知的示例原生代码here和Android here。

- ApriOri

Answer 3

你无法更改状态栏。苹果只允许您更改状态栏的外观。对于iOS应用程序，可能全局更改外观适合您。

打开由ReactNative生成的.xcproj文件并：

1. 在您的Info.plist中，您需要将“View controller-based status bar appearance”设置为布尔值。
2. 将其设置为NO，并在AppDelegate中添加此代码来设置样式：didFinishLaunchingWithOptions函数：UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.LightContent, animated: true)

- FedeH