我是 React 和 React Native 的新手。目前，对于每个组件，我将代码分成 2 个单独的文件：
index.js 对于所有 React 代码，以及；styles.js 对于样式表有没有办法将props传递到外部样式表中？
示例
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
}
});上面的代码不起作用，但更多的是为了理解我正在尝试做的事情。任何帮助深表感谢！
我宁愿将我的样式放在一个单独的文件 style.js 中。在styles.js 中：
export const styles = (props) => StyleSheet.create({
icon : {
color: props.iconColor,
fontSize: props.iconSize
}
}
在主类中，您可以传递值
return (
<Icon style={styles(this.props).icon} />
);
或者，您可以直接使用这些值
export const styles = (iconColor,iconSize) => StyleSheet.create({
icon : {
color: iconColor,
fontSize: iconSize
}
}
在你的主班里
return (
<Icon style={styles(this.props,iconColor,
this.props.iconSize).icon} />
);
我在样式表中发送 noFooter boolean prop
<View style={styles.mainFooterCont(noFooter)}>
<Text> Testing </Text>
</View>
并收到它喜欢
mainFooterCont: noFooter => ({
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingBottom: noFooter ? 0 : 20,
paddingTop: Metrics.ratio(noFooter ? 0 : 5),
}),
创建一个类，将 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')
}
只需将样式表包装在一个函数中，您可以选择在其中传递props。
代替：
const styles = StyleSheet.create({
Title: { color: 'white' }
});
你做：
const styles = (props?: any) => StyleSheet.create({
Title: { color: 'white' }
});
现在当你将它们添加到你的组件中时，而不是
style={styles.Title}
你做：
style={styles(propsObjectHere).Title}
由于这是可选的并且您没有props可以通过，只需执行以下操作：
style={styles().Title}
PS 如果您出于某种原因不使用 TypeScript，请忽略该类型：P
解决方案：
render() {
const iconColor = this.props.color || '#000';
const iconSize = this.props.size || 25;
return (
<Icon style={{...styles.icon, color: iconColor, fontSize: iconSize }} />
示例样式.js：
const styles = StyleSheet.create({
icon : {
color: iconColor,
fontSize: iconSize
}})