在React Native中访问主题颜色

问题描述

我正在尝试访问主题的原色。我遇到了问题，因为错误提示“无法读取未定义的属性颜色”

请在下面检查我的代码。

import React,{ memo } from "react";
import { StyleSheet,Text,withTheme } from "react-native";

const Header = ({ children }) => <Text style={styles.header}>{children}</Text>;

const styles = StyleSheet.create({
  header: {
    fontSize: 26,color: withTheme.colors.primary,},});

export default memo(Header);

解决方法

您从react-native导入withTheme，应从react-native-paper导入

import {withTheme} from "react-native-paper"

,

您可以在react-native-paper中使用它

import React,{ memo } from "react";
import { StyleSheet,Text } from "react-native";
import { DefaultTheme } from 'react-native-paper';

const theme =  ({
    ...DefaultTheme,colors: {
        ...DefaultTheme.colors,}
});
const Header = ({ children }) => <Text style={styles.header}>{children}</Text>;

const styles = StyleSheet.create({
  header: {
    fontSize: 26,color: theme.colors.primary,},});

export default memo(Header);

如果您已经定义了主题，并且想要将其导入此处，则可以将主题HOC如下使用

import React,Text } from "react-native";
import { withTheme } from 'react-native-paper';

const Header = ({ theme,children }) => {
    const styles = StyleSheet.create({
        header: {
            fontSize: 26,});
    return (
        <Text style={styles.header}>{children}</Text>
    )
}

export default memo(withTheme(Header));