Question

如何在React Native Paper中将主题设置为深色主题？在我所有的屏幕中，所有<View>仍带有白色背景。

const theme = {
      ...DarkTheme,
      colors: {
        ...DarkTheme.colors,
        primary: '#2d3436',
        accent: '#1C1C1C',
        background : '#636e72'
      }
    };

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

Answer 1

应用主题和提供者级别不会更改所有视图。导出时必须使用“ withTheme”，它将提供主题道具，您可以使用主题道具来访问颜色。

import { withTheme } from 'react-native-paper';
const Test = ({ theme,children }) => {
  const { colors } = theme;
  return (
    <View style={{ backgroundColor: colors.background }}>
     {children}
    </View>
  );
};

export default withTheme(Test);

如果您想对所有视图使用相同的主题，请创建一个自定义包装器组件，该组件将设置如上的颜色

反应本机纸黑暗主题

1 个答案: