Темный режим iOS 13 в React Native с панелью вкладок и панелью навигации - PullRequest
Новая
       53

Темный режим iOS 13 в React Native с панелью вкладок и панелью навигации

0 голосов
/ 08 октября 2019

В настоящее время я пытаюсь создать настройку с нижней панелью вкладок, а внутри вкладок - каждая панель навигации с панелью навигации. Я использую следующий код, основанный на реакции навигации пример приложения (незначительные изменения импорта, поскольку некоторые вещи были перемещены).

К сожалению, только панель вкладок отображается в темнотеРежим цвет на симуляторе 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',
  },
});

1 Ответ

1 голос
/ 08 октября 2019

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

// ...
...