如何在 react-native 中为特定组件传递样式道具

Posted 2023-02-22

【中文标题】如何在 react-native 中为特定组件传递样式道具

【英文标题】：How to pass style props for a specific component in react-native

【发布时间】：2018-06-16 08:36:50

【问题描述】：

我尝试为其创建一个具有特定样式的按钮。 我有超过 3 个属性，例如 justifyContent、alignItems、backgroundColor 和 height。我想将另一个组件的样式传递给它，以便按钮的 backgroundColor 属性发生变化。

我的代码：

import React from 'react';
import  Text, TouchableOpacity  from 'react-native';

const Button = ( buttonName, csCode ) => 
  const  buttonStyle, textStyle  = styles;

  return (
    <TouchableOpacity style= buttonStyle, backgroundColor: [csCode] >
      <Text style=textStyle>
      buttonName
      </Text>
    </TouchableOpacity>
  );
;

const styles = 
  textStyle: 
    alignSelf: 'center',
    color: '#ffffff',
    fontSize: 35,
    fontWeight: '600',

  ,
  buttonStyle: 
    justifyContent: 'center',
    alignSelf: 'stretch',
    height: '20%',
  
;

export  Button ;

这里，buttonStyle 没有应用到按钮上，而是只应用了 backgroundColor 属性。有什么帮助吗？

谢谢。

【参考方案1】：

如果您想同时使用样式对象中的样式和内联样式，请将它们放在一个数组中，如下所示：

<TouchableOpacity style=[buttonStyle, backgroundColor: csCode ]>
  ...
</TouchableOpacity>

【讨论】：

如何设置组件样式？