将道具传递到 React Native 中的外部样式表? [英] Passing props into external stylesheet in React Native?

问题描述

我是 React 和 React Native 的新手.目前，对于每个组件，我将代码分成 2 个单独的文件:

I'm new to React and React Native. At the moment for each component I'm breaking the code into 2 separate files:

1. index.js 用于所有 React 代码，以及;
2. styles.js 用于样式表

1. index.js for all the React code, and;
2. styles.js for the StyleSheet

有没有办法将 props 传递到外部 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
  }
});

上面的代码不起作用，但更多的是为了理解我正在尝试做的事情.非常感谢任何帮助！

The code above does not work, but it's more there just to get the point across of what I'm trying to do. Any help is much appreciated!

推荐答案

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

Create a class that takes iconColor and iconSize as arguments and returns a StyleSheet object

// 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')
}

这篇关于将道具传递到 React Native 中的外部样式表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！