Question

我目前正在尝试使用底部的标签栏进行设置，并且在标签内部分别设置带有导航栏的导航堆栈。我使用以下基于反应导航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

在theme中使用navigationOptions。

要将其与您的代码集成：

// ...
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: stackDefaultNavigatorOptions })
const StackB = createStack({ B }, { defaultNavigationOptions: stackDefaultNavigatorOptions })

// ...

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

使用选项卡栏和导航栏的React Native中的iOS 13暗模式

2 个答案: