Question

我正在尝试制作一个自定义按钮组件，并使用道具更改按钮的样式。下面是我的代码：

class CustomButton extends React.Component {

render() {

    return (
      <TouchableOpacity
      style={{height:this.props.height, borderWidth:1}}>

      <Text style={{fontSize:13}}>{this.props.text}</Text>

      </TouchableOpacity>
    )
}
}

我这样称呼我的组件：

<CustomButton

      // custom text using props works fine
      text="whatever I want to say"

      // But changing custom style won't work.
     height='200' or 200
/>

但是我可以使用道具来更改text，但是当我应用它来更改height时，它将不起作用。如何使用道具更改样式？

Answer 1

尝试使用：

<CustomButton
  text="whatever you want to say" 
  height={200}
/>

希望它能起作用

Answer 2

评论不足，您可以尝试发送

<CustomButton
  text="....."
  height='200px'
/>

原因是样式期望200像素，而高度px是关键指标之一。还有其他指标，例如px，em，vw等check w3 units for css

对原生如何使用道具自定义样式做出反应

2 个答案: