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

问题描述

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

编辑：

我有一个可以渲染不同类型图像的单一屏幕，我想要实现的是如何根据当前屏幕上显示的图像来更改barStyle。甚至有什么方法可以做到吗？

情况1： light-background image with dark-content barStyle

情况2 dark-background image with light-content barStyle

解决方法

导入状态栏并添加渲染方法，并根据需要设置barStyle。

尝试

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

,

将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"
  }
});

1. 如果使用image1，则输出将类似于this picture。
2. 如果您使用image2，则输出将类似于this picture。