如何在选项卡导航显示中编辑 React 本机选项卡的样式

Question

如何在标签导航显示中编辑 React 原生标签的样式，使其看起来像这样

现在标签只在 android light 模式下看起来像上图 但是当我将手机的主题切换到 android 上的深色主题时，它看起来像这样

这是不好的，不是我想要的显示方式

在下面查看我的代码

//AuthTabs.js
import 'react-native-gesture-handler';
import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

import SignIn from './tabs/SignIn';
import SignUpPhoneVerify from './tabs/SignUpPhoneVerify';
const Tab = createMaterialTopTabNavigator();

export default function AuthTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="SignIn"
        component={SignIn}
        options={({navigation}) => ({
          tabBarLabel: 'Login',
          activeTintColor: '#fff',
          inactiveTintColor: 'ffffff',
          activeBackgroundColor: '#ffffff',
          inactiveBackgroundColor: '#ffffff',
          style: {
            backgroundColor: '#CE4418',
          },
        })}
      />
      <Tab.Screen
        name="SignUpPhoneVerify"
        component={SignUpPhoneVerify}
        options={({navigation}) => ({
          tabBarLabel: 'Register',
          activeTintColor: '#fff',
          inactiveTintColor: 'ffffff',
          activeBackgroundColor: '#ffffff',
          inactiveBackgroundColor: '#ffffff',
          style: {
            backgroundColor: '#CE4418',
          },
        })}
      />
    </Tab.Navigator>
  );
}

Answer 1

你可以覆盖像here这样的黑暗主题