反应本机纸主题与反应导航不起作用

Question

我是 react-native 的新手。我正在使用 React Native Paper 为所有屏幕提供主题。我也在使用反应导航堆栈导航器和抽屉导航器。首先，对于导航，论文主题在导航组件中不起作用。但是如果我不使用 react-navigation 那么它就可以了。

所以我尝试通过 "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" 这是重音的默认颜色，而不是我的自定义颜色。

我使用的是 react-native 版本 0.61。请建议我做错了什么。也有更好的方法来传递带有导航的 react-native paper 主题。我想要一个适用于所有屏幕的全局主题

谢谢

Answer 1

您在组件 App 中包装了 switch navigator，但没有在任何地方使用它。您需要包装并导出容器：

const Navigation = createAppContainer(switchNavigator);

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

反应本机纸主题与反应导航不起作用

React native paper theme with react navigation not working

react-native

react-navigation

react-native-paper