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

Posted 2023-04-18

【中文标题】根据渲染的背景图片更改 barStyle React Native

【英文标题】：Change barStyle React Native based on the rendered background image

【发布时间】：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 我上传了两个我想要得到的案例

【参考方案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的背景色而是文本的颜色。因为目前状态栏只有浅色内容或深色内容。