[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

您需要像这样使用screenProps：

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