根据渲染的背景图片更改 barStyle React Native答案

【问题标题】：Change barStyle React Native based on the rendered background image根据渲染的背景图片更改 barStyle React Native
【发布时间】：2021-02-16 20:18:54
【问题描述】：

我似乎在任何地方都找不到这个，或者我可能使用了错误的关键字进行搜索，但是如何根据渲染的背景图像的颜色更改 React Native 上的 barStyle（浅色内容/深色内容）

编辑：

我有一个渲染不同类型图像的屏幕，我想要实现的是如何根据屏幕上当前显示的图像更改 barStyle。有没有办法做到这一点？

案例 1： light-background image with dark-content barStyle

案例 2 dark-background image with light-content barStyle

【问题讨论】：

你能举一些例子吗？喜欢图片你想达到什么目标？
@ShahnawazHossan 我上传了两个我想要得到的案例

标签： android ios react-native statusbar

【解决方案1】：

导入statusbar并添加render方法并根据需要设置barStyle。

试试这个

import {  StatusBar, View } from "react-native";
    render() {
       return (<View>
         <StatusBar barStyle="light-content" />
         .....
       </view>);
    }

【讨论】：

这是我通常做的但是，请检查我的附件以了解我想要实现的目标只有一个屏幕，但我想通过当前显示的图像颜色更改 barStyle

【解决方案2】：

将StatusBar设置为transluent，将backgroundColor设置为transparent，可以实现如下：

import React, { Component } from "react";
import { ImageBackground, StyleSheet, StatusBar } from "react-native";

const image1 = { uri: "https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero.jpg" };
const image2 = { uri: "https://reactjs.org/logo-og.png" };

export default class App extends Component {

  componentDidMount() {
    StatusBar.setTranslucent(true);
    StatusBar.setBackgroundColor("transparent");
  }

  render() {
    return (
      <ImageBackground source={image1} style={styles.image}>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    flex: 1,
    resizeMode: "cover"
  }
});

如果您使用image1，您的输出将类似于this picture。
如果您使用image2，您的输出将类似于this picture。

【讨论】：

这似乎是。但是，如果我的图像实际上有白色作为背景颜色呢？如果是这种情况，应该将 barStyle 更改为暗内容，对吗？由于图像本身是动态变化的，我该如何自动执行此操作
我认为您正在更改图像，它会将图像设置在状态栏的顶部。因此，如果您动态更改图像，它也会这样做。你的照片也是这样，对吧？
是的。但目前我们没有改变 barStyle。我使用此代码并将图像更改为具有白色背景的图像，并且状态栏似乎不可见，因为 barStyle 道具仍然是轻内容
例如，您希望状态栏的颜色与图像的颜色相同。这就是为什么不需要改变barStyle，你可以这样做。只需为每张图片使用相同的样式。
我的重点不是statusBar的背景色而是文本的颜色。因为目前状态栏只有浅色内容或深色内容。