我正在尝试访问主题的原色。我遇到了问题,因为错误提示“无法读取未定义的属性颜色”
请在下面检查我的代码。
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);
答案 0 :(得分:0)
您从react-native导入withTheme
,应从react-native-paper
导入
import {withTheme} from "react-native-paper"
答案 1 :(得分:0)
您可以在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, { memo } from "react";
import { StyleSheet, Text } from "react-native";
import { withTheme } from 'react-native-paper';
const Header = ({ theme, children }) => {
const styles = StyleSheet.create({
header: {
fontSize: 26,
color: theme.colors.primary,
},
});
return (
<Text style={styles.header}>{children}</Text>
)
}
export default memo(withTheme(Header));