expo-system-ui

import React, {useState} from 'react';
import {StyleSheet, View, Button} from 'react-native';
import * as SystemUI from '@amazon-devices/expo-system-ui';
import {ColorValue} from 'react-native';

export const App = () => {
  const [backgroundColor, setBackgroundColor] = useState<ColorValue | null>(
    '#0000ff',
  );

  const changeBackgroundColor = async (color: string | null) => {
    console.log(backgroundColor);
    await SystemUI.setBackgroundColorAsync(color);
    setBackgroundColor(await SystemUI.getBackgroundColorAsync());
  };

  return (
    <View style={[styles.container, backgroundColor ? {backgroundColor} : {}]}>
      <Button
        title="更改背景颜色"
        onPress={() =>
          changeBackgroundColor(
            backgroundColor === '#0000ff' ? '#ff0000' : '#0000ff',
          )
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});