React Native Paper 深色主题答案

【问题标题】：React Native Paper Dark ThemeReact Native Paper 深色主题
【发布时间】：2020-08-12 00:02:52
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript react-native react-native-paper

【解决方案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);

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

【讨论】：

有没有办法从样式表文件中访问主题？我的组件通常有单独的样式表文件，能够直接在我的样式表中访问我在主题中设置的颜色会非常有用。
据我所知，主题是通过上下文传递的，所以您需要通过组件访问
看起来我可以做到这一点：<View style={[styles.container, { backgroundColor: colors.background }]}>。我通过这样做访问颜色：const { colors } = theme;