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

Question

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

index.js 用于所有 React 代码，并且；
styles.js 用于样式表

有没有办法将道具传递到外部样式表中？

示例： 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

创建一个 class 将 iconColor 和 iconSize 作为参数，returns 一个 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')
}

Answer 2

我宁愿将我的样式放在一个单独的文件中 styles.js。里面 styles.js:

export const styles = (props) => StyleSheet.create({
        icon : {
        color: props.iconColor,
        fontSize: props.iconSize
      }
    }

在你的 main class 你可以传递值

return (
    <Icon style={styles(this.props).icon} />
  );

或者您可以直接使用这些值所以它会是

export const styles = (iconColor,iconSize) => StyleSheet.create({
    icon : {
    color: iconColor,
    fontSize: iconSize
  }
}

在你的主要 class

return (
    <Icon style={styles(this.props,iconColor, 
this.props.iconSize).icon} />
 );

Answer 3

我正在发送样式为 sheet

的 noFooter 布尔属性

   <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),
   }),

Answer 4

只需将样式表包装在一个函数中，您可以在其中选择性地传递道具。

而不是：

const styles = StyleSheet.create({
  Title: { color: 'white' }
});

你做到了：

const styles = (props?: any) => StyleSheet.create({
  Title: { color: 'white' }
});

现在当您将它们添加到您的组件时，而不是

style={styles.Title}

你做到了：

style={styles(propsObjectHere).Title}

并且由于这是可选的并且您没有要传递的道具，只需执行以下操作：

style={styles().Title}

P.S。如果您出于某种原因没有使用 TypeScript，请忽略该类型：P

Answer 5

解决方案：

render() {

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

   return (
   <Icon style={{...styles.icon, color: iconColor, fontSize: iconSize }} />

示例styles.js：

  const styles = StyleSheet.create({
  icon : {
    color: iconColor,
    fontSize: iconSize
  }})

Answer 6

这是一个更简单的解决方案。

组件

 <View
    style={{
      ...styles?.tabItem_bottomView,
      backgroundColor: selected ? Color?.blue : Color?.white,
    }}
  />

您可以像以前一样使用样式表。那里没有可编辑的内容。

Answer 7

如果您不喜欢创建 class 那么只需创建一个函数，后跟一个键和 return 函数中的一个对象，您只需要传递参数想评估病情。这是例子

export const Style = StyleSheet.create({
 locatorTextInputContainer: (locatorType) => {
    return {
        flexDirection: 'row',
        backgroundColor: locatorType == 'None' || locatorType == '' ? GColors.separatorColor : GColors.white,
        marginBottom: 10,
        paddingBottom: 5,
        marginStart: 10,
        marginEnd: 10,
    }
}

您可以按如下方式使用它

 <View style={Style.locatorTextInputContainer(locatorType)}>
    <TextInput
        value={sourceLocator}
        onChangeText={(text) => {
            dispatch(setSourceLocator(text))
        }}/>
 </View>

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

Passing props into external stylesheet in React Native?

javascript

jsx

reactjs

react-jsx

react-native