2

我正在尝试将 react-native-elements 与我的 React-Native 应用程序一起使用。

我有一个带有主题详细信息的中央 js 文件，正如这里解释的那样，使用 ThemeProvider 注入 - https://react-native-elements.github.io/react-native-elements/docs/customization.html

但是，当我尝试在组件的 stylesheet.create 方法中使用传递的主题时，出现错误。我究竟做错了什么？-

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Text, withTheme} from 'react-native-elements';

const Header = props => {
  const {theme} = props;

  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    width: '100%',
    backgroundColor: theme.container.backgroundColor,//**** Getting error here stating that theme is not defined
    shadowRadius: 1.5,
    elevation: 2,
    shadowColor: 'rgb(0,0,0)',
    shadowOpacity: 0.4,
    shadowOffset: {width: 0, height: 2.5},
  },
});

export default withTheme(Header);

如果我可以提供更多详细信息，请告诉我。

更新：

感谢@Sebastian Berglönn 下面提供的建议，我能够在不导出到不同文件的情况下通过这样做来对其进行参数化 -

const Header = props => {
  const {theme} = props;

  return (
    <View style={styles(theme).container}>
      <Text>Home</Text>
    </View>
  );
};
const styles = theme =>
  StyleSheet.create({
    container: {
      width: '100%',
      backgroundColor: theme.container.backgroundColor,
      shadowRadius: 1.5,
      elevation: 2,
      shadowColor: 'rgb(0,0,0)',
      shadowOpacity: 0.4,
      shadowOffset: {width: 0, height: 2.5},
    },
  });
4

3 回答 3

4

从看起来代码theme是在 Header 组件中定义的，所以它显示主题是未定义的。

要从主题应用 backgroundColor，您可以执行以下操作：

const Header = props => {
  const {theme} = props;

  return (
    <View style={[styles.container,{backgroundColor: theme.container.backgroundColor}]}>
      <Text>Home</Text>
    </View>
  );
};

并且不要忘记从 StyleSheet 中删除 backgroundColor。

const styles = StyleSheet.create({
  container: {
    width: '100%',
    //backgroundColor: theme.container.backgroundColor,
    shadowRadius: 1.5,
    elevation: 2,
    shadowColor: 'rgb(0,0,0)',
    shadowOpacity: 0.4,
    shadowOffset: {width: 0, height: 2.5},
  },
});
于 2019-10-08T05:42:31.713 回答
4

我可以建议您以更简洁的方式使用样式表中的函数。该方法类似于在第一个主题中给出的建议，但我们不会使用全局样式表 var，而是仅在所需样式上使用变量：

  container: theme => ({
      flex: 1,
      backgroundColor: theme.colors.backgroundPrimary
   }),

在您看来，用法也很干净：

<View style={styles.container(theme)}>

但是，这两种解决方案都非常有效，请选择最符合您需求的解决方案 :)

于 2020-01-21T08:40:03.910 回答
0

在 Provider 或 Provided 组件的子组件中，您可以使用 HOC 执行以下操作：

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Text, withTheme} from 'react-native-elements';

const Header = props => {
  const {theme} = props;

  return (
    <View style={styles(theme).container}> // --> Here styles called as a function
      <Text>Home</Text>
    </View>
  );
};

const styles = theme => StyleSheet.create({
  container: {
      width: '100%',
      backgroundColor: theme.container.backgroundColor,
      shadowRadius: 1.5,
      elevation: 2,
      shadowColor: 'rgb(0,0,0)',
      shadowOpacity: 0.4,
      shadowOffset: {width: 0, height: 2.5},
    }
});

export default withTheme(Header, styles);
于 2021-06-28T17:20:03.847 回答