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

Question

我尝试为其创建一个具有特定样式的按钮。我有超过 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 属性。有帮助吗？

谢谢。

Answer 1

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

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

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

How to pass style props for a specific component in react-native

styles

reactjs

react-native

react-props