在 withStyles 函数之外访问主题变量 (react-native-ui-kitten)答案

【问题标题】：Access theme variables outside withStyles function (react-native-ui-kitten)在 withStyles 函数之外访问主题变量 (react-native-ui-kitten)
【发布时间】：2019-10-08 21:08:14
【问题描述】：

我想使用主题变量来相应地设置我的图标样式。但是我不能使用 style 属性来填充 react-native-ui-kitten 的 Icon 元素，而是必须使用 fill 属性。如何在 react-native-ui-kitten 的 withStyles 函数之外访问主题变量

【问题讨论】：

标签： react-native-ui-kitten

【解决方案1】：

@xk2tm5ah5c 如果将组件包装到 withStyles 中，则可以使用 theme 属性。

这是一个示例代码：

import React from 'react';
import { View } from 'react-native';
import { Button, Icon, withStyles } from 'react-native-ui-kitten';

const ScreenComponent = (props) => {

  const iconColor = props.theme['color-primary-default'];

  const FacebookIcon = (style) => (
    <Icon {...style} fill={iconColor} name='facebook' />
  );

  return (
    <View>
      <Button icon={FacebookIcon}>LOGIN WITH FACEBOOK</Button>
    </View>
  );
};

export const Screen = withStyles(ScreenComponent);

【讨论】：

谢谢，这就是我想要的。稍后会尝试，但现在将您的答案标记为正确，以防我忘记了

【解决方案2】：

我不太确定我是否完全理解您的问题。通常，当您有问题时，您应该发布一些代码作为上下文。

这是我的答案，假设“主题变量”是一个哈希...尝试字符串插值：

fill={`${theme.HEX_COLOR}`}

【讨论】：

我没有问题所在的主题变量 :) 我想访问 react-native-ui-kitten 提供的主题字典。 artyorsh 的答案是我一直在寻找的。不过还是谢谢你的建议。