使用 React Native 矢量图标将样式应用于操作列表答案

【问题标题】：Applying style to actions list using React Native vector-icons使用 React Native 矢量图标将样式应用于操作列表
【发布时间】：2016-06-21 09:06:10
【问题描述】：

我正在使用 React Native 构建一个 Android 应用程序，并且我正在使用 react-native-vector-icons 生成工具栏标题。下面是我的渲染函数中的一个 sn-p，显示了我是如何使用矢量图标库的。

<Icon.ToolbarAndroid
        style={styles.toolbar}
        title="Home"
        titleColor="white"
        navIconName="md-menu"
        onIconClicked={this.toggleSideMenue.bind(this)}
        actions={[
          { title: 'AddPerson', ref : 'addPerson', iconName: 'md-person-add', show: 'always'},
          { title: 'Swap', iconName: 'md-swap', show: 'always'},
        ]}
        onActionSelected={(position) => this.onActionSelected(position)}
/>

我可以轻松地将样式应用到工具栏本身，但我的问题是是否有办法将样式应用到 actions 列表中的图标？例如。更改图标颜色、旋转、大小等。我尝试了以下方法，但似乎没有做任何事情：

{ title: 'Swap', style : {color : 'red'}, iconName: 'md-swap', show: 'always'},

【问题讨论】：

标签： react-native

【解决方案1】：

在你的js文件中添加import Icon from 'react-native-vector-icons/MaterialIcons';

改变

actions={[
      { title: 'AddPerson', ref : 'addPerson', iconName: 'person-add', show: 'always'},
      { title: 'Swap', iconName: 'swap', show: 'always'},
    ]}

并且不可能更改动作图标的样式！

【讨论】：

图标被导入为import Icon from 'react-native-vector-icons/Ionicons，它可以很好地显示图标。我从代码 sn-p 中省略了它，因为这不是我真正关心的问题。可悲的是，如果这个答案是正确的，图标样式自定义在操作列表中不起作用。
所以，对于改变颜色图标，简单的解决方法就是添加 iconColor 参数，例如：{ title: 'Swap', iconName: 'swap', show: 'always', iconColor : 'red'}。 actions 列表中似乎不支持其他类型的自定义类 css 样式，例如更改不透明度、旋转等。