React Native：更改底部 android 缺口颜色

Question

我已经被这个问题困扰了几天，我想将 android 手机底部凹槽的颜色更改为红色，但没有成功...

注意突出显示的底部https://i.stack.imgur.com/bxaxH.jpg

我使用 React Native Navigation V6

我尝试过的事情：

1)更改选项卡导航器的背景颜色

tabBarStyle: [
    { 
        width:'100%',height:60,backgroundColor:'transparent' },

2)更改 NavigationContainer 的默认主题

const MyTheme = {
        ...DefaultTheme,
        colors: {
          ...DefaultTheme.colors,
          background: 'red',
          primary: 'red',
        },
      };

<NavigationContainer theme={DefaultTheme}>
            <ROOTSTACK1></ROOTSTACK1>
        </NavigationContainer>

3)改变rootstack的backgroundColor

<RootStack.Navigator screenOptions={{ gestureEnabled: true, navigationBarColor:'red' }}>

这些都不起作用。

Answer 1

我修复它使我的屏幕像这样：

<View style={{flex: 1, background: '#FFF'}}>
  <StatusBar backgroundColor="#FFF" barStyle="dark-content" />
  <SafeAreaView style={{ flex: 1 }}>
  {...components}
  </SafeAreaView>
</View>