javascript React原生纸暗主题

3lxsmp7m 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(124)

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

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

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

JavaScript

来源：https://stackoverflow.com/questions/63367950/react-native-paper-dark-theme

2条答案

按热度按时间

oogrdqng1#

应用主题和提供程序级别不会更改所有视图。您必须在导出时使用“withTheme”，它将提供可用于访问颜色的主题 prop 。

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

如果您想对所有视图使用相同的主题，请创建一个定制的 Package 器组件，像上面那样设置颜色

赞(0）回复(0）举报 2023-02-28

kuuvgm7e2#

您可以使用react-navigation配置主题，而不是在每个屏幕/组件上添加额外的钩子。
https://callstack.github.io/react-native-paper/docs/guides/theming-with-react-navigation#passing-theme-with-providers

赞(0）回复(0）举报 2023-02-28

我来回答

javascript React原生纸暗主题

2条答案

相关问题

热门标签

最新问答