Question

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

index.js代表所有React代码，并且;
styles.js

有没有办法将道具传递到外部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

我正在样式表中发送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 2

创建一个以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')
}

Answer 3

我宁愿将样式保存在单独的文件styles.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} />
 );

Answer 4

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

代替：

    const express = require('express');
    const cors = require('cors');
    const app = express();
    app.use(cors())

  //for single origin
  var corsOptions = {
  origin: 'http://localhost:8080',
  optionsSuccessStatus: 200 // For legacy browser support
 }

app.use(cors(corsOptions));

您这样做：

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

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

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

您这样做：

style={styles.Title}

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

style={styles(propsObjectHere).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
  }})

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

5 个答案: