首页 文章

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

提问于
浏览
8

我尝试创建一个具有特定样式的按钮 . 我有超过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 prop . 有帮助吗?

谢谢 .

1 回答

  • 9

    如果要将样式对象和内联样式中的样式一起使用,请将它们放在如下数组中:

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

相关问题