怎么才能测试使用这两个属性statusBarTranslucent,navigationBarTranslucent，并使它生效

Before submitting a new issue

[X] I tested using the latest version of the library, as the bug might be already fixed.
[X] I tested using a supported version of react native.
[X] I checked for possible duplicate issues, with possible answers.

Bug summary

How can I test the use of these two attributes, statiusBarTranslucent and navigationBarTranslucent, and make them effective? Are these two attributes applied to the status and @ navigation/back of rn?

Library version

6.1.1

Environment info

{\rtf1\ansi\ansicpg936\cocoartf2761
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0

\f0\fs24 \cf0 System:\
  OS: macOS 14.4.1\
  CPU: (8) arm64 Apple M1\
  Memory: 87.84 MB / 16.00 GB\
  Shell:\
    version: "5.9"\
    path: /bin/zsh\
Binaries:\
  Node:\
    version: 18.20.4\
    path: ~/.nvm/versions/node/v18.20.4/bin/node\
  Yarn: Not Found\
  npm:\
    version: 10.7.0\
    path: ~/.nvm/versions/node/v18.20.4/bin/npm\
  Watchman:\
    version: 2024.07.15.00\
    path: /opt/homebrew/bin/watchman\
Managers:\
  CocoaPods:\
    version: 1.15.2\
    path: /Users/archermind/.rbenv/shims/pod\
SDKs:\
  iOS SDK:\
    Platforms:\
      - DriverKit 23.4\
      - iOS 17.4\
      - macOS 14.4\
      - tvOS 17.4\
      - visionOS 1.1\
      - watchOS 10.4\
  Android SDK: Not Found\
IDEs:\
  Android Studio: Not Found\
  Xcode:\
    version: 15.3/15E204a\
    path: /usr/bin/xcodebuild\
Languages:\
  Java:\
    version: 17.0.11\
    path: /usr/bin/javac\
  Ruby:\
    version: 3.1.3\
    path: /Users/archermind/.rbenv/shims/ruby\
npmPackages:\
  "@react-native-community/cli": Not Found\
  react:\
    installed: 18.3.1\
    wanted: 18.3.1\
  react-native:\
    installed: 0.75.0-rc.6\
    wanted: 0.75.0-rc.6\
  react-native-macos: Not Found\
npmGlobalPackages:\
  "*react-native*": Not Found\
Android:\
  hermesEnabled: true\
  newArchEnabled: false\
iOS:\
  hermesEnabled: true\
  newArchEnabled: false}

Steps to reproduce

import React from 'react'; import { useState, useEffect } from 'react'; import { Animated, View, Text, Dimensions, Platform, StatusBar, StyleSheet, } from 'react-native'; import BootSplash from 'react-native-bootsplash';

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, text: { fontSize: 30, fontWeight: '700', margin: 20, lineHeight: 30, color: '#333', textAlign: 'center', }, });

type Props = { onAnimationEnd: () => void; };

const useNativeDriver = Platform.OS !== 'web';

const AnimatedBootSplash = ({ onAnimationEnd }: Props) => { const [opacity] = useState(() => new Animated.Value(1)); const [translateY] = useState(() => new Animated.Value(0));

const { container, logo /, brand / } = BootSplash.useHideAnimation({ manifest: require('../source/bootsplash_manifest.json'), logo: require('../source/bootsplash_logo.png'), // darkLogo: require("../assets/bootsplash/dark-logo.png"), // brand: require("../assets/bootsplash/brand.png"), // darkBrand: require("../assets/bootsplash/dark-brand.png"),

statusBarTranslucent: true,
navigationBarTranslucent: true,

animate: () => {
  // const { height } = Dimensions.get('window');

  // Animated.stagger(1000, [
  //   Animated.spring(translateY, {
  //     useNativeDriver,
  //     toValue: -50,
  //   }),
  //   Animated.spring(translateY, {
  //     useNativeDriver,
  //     toValue: height,
  //   }),
  // ]).start();

  // Animated.timing(opacity, {
  //   useNativeDriver,
  //   toValue: 0,
  //   duration: 150,
  //   delay: 350,
  // }).start(() => {
  //   onAnimationEnd();
  // });
},

});

return ( <Animated.View {...container} style={[container.style, { opacity }]}>

  <Animated.Image
    {...logo}
    style={[logo.style, { transform: [{ translateY }] }]}
  />
</Animated.View>

); };

const UseHideAnimationTest = () => { const [visible, setVisible] = useState(true); return ( <View style={{ height: '80%', width: '100%' }}>

Hello BootSplash {visible && ( { BootSplash.isVisible(); setVisible(false); }} /> )}

</View>

); };

export const BootSplashDemo1 = () => { const [visible, setVisible] = useState(true); useEffect(() => { // StatusBar.setBarStyle('light-content'); if (Platform.OS !== 'android') { // StatusBar.setBackgroundColor('transparent'); // StatusBar.setTranslucent(true); } }, []);

return (

<View style={{ top: 48 }}>

  <UseHideAnimationTest></UseHideAnimationTest>
  {visible && (
    <AnimatedBootSplash
      onAnimationEnd={() => {
        setVisible(false);
      }}
    />
  )}

</View>

); };

Reproducible sample code

import React from 'react';
import { useState, useEffect } from 'react';
import {
  Animated,
  View,
  Text,
  Dimensions,
  Platform,
  StatusBar,
  StyleSheet,
} from 'react-native';
import BootSplash from 'react-native-bootsplash';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  text: {
    fontSize: 30,
    fontWeight: '700',
    margin: 20,
    lineHeight: 30,
    color: '#333',
    textAlign: 'center',
  },
});

type Props = {
  onAnimationEnd: () => void;
};

const useNativeDriver = Platform.OS !== 'web';

const AnimatedBootSplash = ({ onAnimationEnd }: Props) => {
  const [opacity] = useState(() => new Animated.Value(1));
  const [translateY] = useState(() => new Animated.Value(0));

  const { container, logo /*, brand */ } = BootSplash.useHideAnimation({
    manifest: require('../source/bootsplash_manifest.json'),
    logo: require('../source/bootsplash_logo.png'),
    // darkLogo: require("../assets/bootsplash/dark-logo.png"),
    // brand: require("../assets/bootsplash/brand.png"),
    // darkBrand: require("../assets/bootsplash/dark-brand.png"),

    statusBarTranslucent: true,
    navigationBarTranslucent: true,

    animate: () => {
      // const { height } = Dimensions.get('window');

      // Animated.stagger(1000, [
      //   Animated.spring(translateY, {
      //     useNativeDriver,
      //     toValue: -50,
      //   }),
      //   Animated.spring(translateY, {
      //     useNativeDriver,
      //     toValue: height,
      //   }),
      // ]).start();

      // Animated.timing(opacity, {
      //   useNativeDriver,
      //   toValue: 0,
      //   duration: 150,
      //   delay: 350,
      // }).start(() => {
      //   onAnimationEnd();
      // });
    },
  });

  return (
    <Animated.View {...container} style={[container.style, { opacity }]}>
      <StatusBar backgroundColor="blue"/>
      <Animated.Image
        {...logo}
        style={[logo.style, { transform: [{ translateY }] }]}
      />
    </Animated.View>
  );
};

const UseHideAnimationTest = () => {
  const [visible, setVisible] = useState(true);
  return (
    <View style={{ height: '80%', width: '100%' }}>
      <View style={styles.container}>
        <Text style={styles.text}>Hello BootSplash</Text>
        {visible && (
          <AnimatedBootSplash
            onAnimationEnd={() => {
              BootSplash.isVisible();
              setVisible(false);
            }}
          />
        )}
      </View>
    </View>
  );
};

export const BootSplashDemo1 = () => {
  const [visible, setVisible] = useState(true);
  useEffect(() => {
    // StatusBar.setBarStyle('light-content');
    if (Platform.OS !== 'android') {
      // StatusBar.setBackgroundColor('transparent');
      // StatusBar.setTranslucent(true);
    }
  }, []);

  return (

    <View style={{ top: 48 }}>

      <UseHideAnimationTest></UseHideAnimationTest>
      {visible && (
        <AnimatedBootSplash
          onAnimationEnd={() => {
            setVisible(false);
          }}
        />
      )}

    </View>
  );
};

zoontek / react-native-bootsplash