react-native - 带有选项卡栏和导航栏的 React Native 中的 iOS 13 暗模式

Question

我目前正在尝试设置一个底部选项卡栏，在选项卡内，每个选项卡都有一个带导航栏的导航堆栈。我根据 react 导航使用以下代码 sample app (只是对导入进行了微小的修改，因为有些东西被移动了)。

遗憾的是，在iOS 13模拟器(深灰色)上只有标签栏以深色模式颜色显示，导航栏为白色。我怎样才能让它在深色模式下也显示出来？

import React from 'react';
import { StyleSheet, View } from 'react-native';
import {
  createAppContainer,
  Themed,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { AppearanceProvider, useColorScheme } from 'react-native-appearance';

function A() {
  return (
    <View style={styles.container}>
      <Themed.Text>B</Themed.Text>
    </View>
  );
}

A.navigationOptions = { title: 'Hello from A' };

function B() {
  return (
    <View style={styles.container}>
      <Themed.Text>B</Themed.Text>
    </View>
  );
}

B.navigationOptions = { title: 'Hello from B!!!!' };

let StackA = createStackNavigator({ A });
let StackB = createStackNavigator({ B });
let Tabs = createBottomTabNavigator({ StackA, StackB });
let Navigation = createAppContainer(Tabs);

export default function App() {
  let theme = useColorScheme();

  return (
    <AppearanceProvider>
      <Navigation theme={theme} />
    </AppearanceProvider>
  );
}

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

Answer 1

https://reactnavigation.org/docs/en/themes.html#built-in-themes-inside-navigationoptions

在 navigationOptions 中使用 theme。

将其与您的代码集成:

// ...
const stackDefaultNavigationOptions = ({ theme }) => { 
  // theme will be either 'light' or 'dark',
  // choose however you want to retrieve the colors for that

  // using ternary here as just a simple example,
  // but you could instead have a theme object with the keys light and dark
  return {
    title: 'Home',
    headerTintColor: theme === 'light' ? 'black' : 'white',
    headerStyle: { backgroundColor: theme === 'light' ? 'white' : 'black' },    
  }
}

const StackA = createStack({ A }, { defaultNavigationOptions: stackDefaultNavigationOptions })
const StackB = createStack({ B }, { defaultNavigationOptions: stackDefaultNavigationOptions })

// ...

export default function App() {
  let theme = useColorScheme();

  return (
    <AppearanceProvider>
        <Navigation theme={theme} />
    </AppearanceProvider>
  )
}

// ...