在React Native中将道具传递到外部样式表中？

Question

我是React和React Native的新手。目前，对于每个组件，我都将代码分为2个单独的文件：

1. index.js 对于所有的React代码，以及；
2. styles.js 用于StyleSheet

有没有办法将道具传递到外部StyleSheet？

例如 index.js：

render() {

  const iconColor = this.props.color || '#000';

  const iconSize = this.props.size || 25;



  return (

    <Icon style={styles.icon} />

  );

}

范例styles.js：

const styles = StyleSheet.create({

  icon : {

    color: iconColor,

    fontSize: iconSize

  }

});

上面的代码不起作用，但更多的地方只是为了让我理解我正在尝试做的事情。任何帮助深表感谢！

Answer 1

创建一个将iconColor和iconSize作为参数并返回StyleSheet对象的类

// styles.js

export default class StyleSheetFactory {
    static getSheet(iconSize, iconColor) {
        return StyleSheet.create({
            icon : {
                color: iconColor,
                fontSize: iconSize
            }
        })
    }
}

// index.js

render() {
    let myStyleSheet = StyleSheetFactory.getSheet(64, 'red')
}