iOS 13 React Native 中带有标签栏和导航栏的深色模式

Question

我目前正在尝试设置底部标签栏，在标签内，每个标签都有一个带导航栏的导航堆栈。我使用以下基于反应导航 sample app 的代码（只是对导入进行了微小的修改，因为有些东西被移动了）。

遗憾的是，在iOS13模拟器（深灰色）上只有标签栏显示为深色模式颜色，导航栏为白色。我怎样才能让它在暗模式颜色下也能显示？

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>
  )
}

// ...

Answer 2

使用 React 导航主题内置插件。如果您使用 Expo，在 iOS 13+ 上，您可以添加 Appearance 来检测首选配色方案。

const Navigation = createAppContainer(RootStack);
export default () => <Navigation theme="light" />;

查看文档。 RN Themes

或者，您可以使用 npm 包 react-native-dark-mode

iOS 13 React Native 中带有标签栏和导航栏的深色模式

iOS 13 Dark Mode in React Native with Tab Bar and Navigation Bar

tabs

navigationbar

react-native

react-navigation