reactjs - 在 ThemeProvider React Native 中访问颜色

Question

我有一个theme这样的：

export const theme = {
  red: "#CF3721",
  darkGrey: "#191919",
  white: "#fff",
  blue: "#31A9B8",
};

和一个ThemeProvider：

<ThemeProvider theme={theme}>
  <Navigator />
</ThemeProvider>

我怎样才能进入下面的red color内部styles？我尝试过这样的事情，但效果不佳。我正在使用React Native.

<Component
    styles={{
            fontSize: 20,
            color: `${({ theme }) => theme.red}`,
           }}
/>

Answer 1

react-theme-provider库导出useTheme钩子和withThemeHOC。您可以使用其中之一访问主题上下文。

const { ThemeProvider, withTheme, useTheme } = createTheming(defaultTheme);

如果您使用的是功能组件，则可以使用 useTheme 挂钩。

function App() {
  const theme = useTheme();

  return (
    <Component
      styles={{
        fontSize: 20,
        color: theme.red,
      }}
    />
  );
}

如果您使用的是 Class 组件，则可以使用 withTheme HOC。

class App extends React.Component {
  render() {
    return (
      <Component
        styles={{
          fontSize: 20,
          color: this.props.theme.red,
        }}
      />
    );
  }
}

export default withTheme(App);

您可以在文档中查找更高级的用法。https://github.com/callstack/react-theme-provider