在 React Native 中访问主题颜色答案

【问题标题】：Accessing Theme Color in React Native在 React Native 中访问主题颜色
【发布时间】：2020-08-30 15:35:02
【问题描述】：

我正在尝试访问主题的原色。我有一个问题，因为错误说“无法读取未定义的属性颜色”

请检查我下面的代码。

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

【问题讨论】：

withTheme 不是从 react-native 导出的。

标签： reactjs react-native react-native-paper

【解决方案1】：

您可以创建一个名为 useStyles 的函数，然后通过参数传递主题对象。

例子：

import React, { memo } from "react";
import { StyleSheet, Text } from "react-native";
import { useTheme } from 'react-native-paper'; //or styled-components theme object 

const Header = ({ children }) => {

  const theme = useTheme();
  const styles = useStyles(theme);

  return <Text style={styles.header}>{children}</Text>;
}



const useStyles = theme => (StyleSheet.create(({
  container: {
    ...
  },
  header: {
    fontSize: 26,
    color: theme.colors.primary,
  },
  something: {
    ...
    backgroudColor: theme.colors.background,
  },
  other: {
    ...
    color: theme.colors.primary,
  },
)))


export default memo(Header);

【讨论】：

【解决方案2】：

你可以在 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);

如果您已经定义了一个主题并想在此处导入它，那么您可以使用 withTheme 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));

【讨论】：

【解决方案3】：

你从 react-native 导入 withTheme，它应该从 react-native-paper 导入

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

【讨论】：

它说无法准备好未定义的属性'primary'