Question

我已经从react native元素按钮中创建了一个自定义按钮，并以'title'和'onPress'作为道具，但是我希望能够从屏幕的JSX内部更改按钮的背景颜色，我可以因为它在'buttonStyle'道具内部，所以不知道如何将其作为道具放置。我尝试过将其作为道具添加如下，并尝试了多种其他方式，但我无法使其正常工作。...有人知道这是否可行以及如何实现？我的代码如下（我剥离了许多其他不相关的道具，因此很清楚我在问什么）：

import React from "react";
import { Button } from "react-native-elements";
import { View } from "react-native";

const BandButton = ({ onPress, title }) => {
    return (

  <Button
    title={title}
    onPress={onPress} 
    buttonStyle={{
      height: 60,
      borderRadius: 5,
      backgroundColor:{backgroundColor}

    }}

  />
  )
};

export default BandButton;

JSX中的按钮：

<BandButton 
            title='Add details'
            onPress ={() => this.props.navigation.navigate('Create')}
            buttonStyle={{backgroundColor: '#FF9800'}}

            />

谢谢任何能提供帮助的人！

Answer 1

这应该有效：

import React from "react";
import { Button } from "react-native-elements";
import { View } from "react-native";

const BandButton = ({ onPress, title, customStyles }) => {
    const defaultStyles = {
      height: 60,
      borderRadius: 5,
    }
    return (
      <Button
        title={title}
        onPress={onPress} 
        buttonStyle={[defaultStyles, customStyles]}
      />
  )
};

export default BandButton;

现在像这样使用该组件：

<BandButton 
    title='Add details'
    onPress ={() => this.props.navigation.navigate('Create')}
    customStyles={{backgroundColor: '#FF9800'}}
/>

Answer 2

react-native支持这种样式

style={{backgroundColor: option.color}}

尝试执行相同操作：

backgroundColor:backgroundColor

backgroundColor应该是类似'#ff0000'的字符串

我可以添加backgroundColor作为自定义道具来响应本机元素按钮吗？

2 个答案: