Реагируй на родную тему с не реагирующей навигацией

Question

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

Поэтому я попытался передать тему от компонента к компоненту с помощью «withTheme». Но withTheme не дает мне мои специальные реквизиты темы.

Это мой App.js

import { DefaultTheme,Provider as PaperProvider, Drawer, Avatar, withTheme } from 'react-native-paper';
import { createAppContainer,createSwitchNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer' 

const theme = {
  ...DefaultTheme,
  roundness: 8,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ff0000',
    accent: '#000000',
    text: "#cc1111",
    background: "#000000",
    contained: '#000000'
  },
  dark: true
};

class App extends Component {

  render(){
      return(
        <PaperProvider theme={theme}>  
           <switchNavigator />
        </PaperProvider>
      )
  }
};

const switchNavigator = createSwitchNavigator({
  Login: Login,
  dranav: drawyerNavigator
},
{
  initialRouteName: "Login",

})
export default  createAppContainer(switchNavigator);

Это мой login.js

class Login extends Component{
    state = {
       emailtext: '',
       passwordtext: ''
    };
    componentDidMount() {
        SplashScreen.hide();
    }
    render(){
       const {navigate} = this.props.navigation;
       const { colors } = this.props.theme;
       console.log({colors.accent})
   }

}
export default withTheme(Login)

В моем Login.js я ожидал, что "colors.accent"дать значение моей пользовательской темы, например, это значение - "# 000000". Но он дает мне = "# 03DAC4", который является цветом по умолчанию для акцента, а не моего пользовательского цвета.

Я использую реактивную версию 0.61. подскажите пожалуйста что я делаю не так. Также есть ли лучший способ передать родную бумажную тему с помощью навигации. Я хочу глобальную тему для всех экранов

Спасибо

Answer 1

Вы включаете переключатель навигатор в компонент App, но нигде не используете его. Вам нужно вместо этого обернуть и экспортировать контейнер:

const Navigation = createAppContainer(switchNavigator);

export default function App() {
  return(
    <PaperProvider theme={theme}>  
      <Navigation />
    </PaperProvider>
  )
}