将道具传递到 React Native 中的外部样式表? [英] Passing props into external stylesheet in React Native?
本文介绍了将道具传递到 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:
index.js
用于所有 React 代码,以及;styles.js
用于样式表
index.js
for all the React code, and;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屋!
查看全文