Question

我正在尝试在我的React-Native应用程序中使用react-native-elements。

我有一个带有主题详细信息的中央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);

请告知我是否可以提供更多详细信息。

由于@SebastianBerglö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},
    },
  });

Answer 1

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

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

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

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

但是，两种解决方案都像魅力一样，选择最符合您需求的解决方案：）

Answer 2

通过查看代码theme是在标头组件中定义的，因此它表明主题未定义。

要从主题应用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},
  },
});

Answer 3

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

使用Stylesheet.create反应本机元素

3 个答案: