如何为react-native-elements按钮指定默认颜色？

Question

现在我正在为我的应用使用 react-native-elements 组件库。具体来说，我使用的是Button组件，它的默认颜色为灰色。

如何为这些按钮设置自定义默认颜色，而不必每次都传递样式道具？

是否有一个我可以调用的简单函数/方法，或者我是否需要创建一个自定义组件来包装它？我更喜欢前者。

Answer 1

我现在开始做一个包装课。如果有人发现如何做到这一点，请发布。

为此，我做了以下

- 从 react-native-elements

导入按钮类

import {Button} from 'react-native-elements'

- 处理了一个 Component 类，我将所有相同的道具传递给react-native-elements中的原始按钮。

class ButtonCustom extends Component{    
    constructor(props) {
      super(props)
    }
    render(){
      return (
        <Button 
        {...this.props} 
        backgroundColor={this.props.backgroundColor|| 'blue' } /> 
        //this allows me to override that backgroundColor if i need to
      )
    }  
}

- 将其作为易于重用的模块导出

module.exports = ButtonCustom;

每当我需要它时，我只需导入并使用它。我至少不需要每次都设置样式，如果需要，我可以进行全局更改。

<ButtonCustom
          title="Blue Automatically"
          />

Answer 2

我知道这是一个老问题，但是自从我找到了这篇文章后，我将在这里留下这个答案供其他人查看。

自Oct 2018起，

react-native-elements支持主题。根据{{​​3}}，您可以在RN应用程序中使用主题提供程序，并通过执行以下操作来覆盖库的默认颜色：

import { ThemeProvider } from 'react-native-elements';

const theme = {
  colors: {
    primary: 'pink',
  }
}

....
....

render(){
  ...
  return(
      <ThemeProvider theme={theme} >
         <App/>
      </ThemeProvider>
   )
}

上面的示例将更改所有组件的原色。通过应用相同的逻辑，您可以仅更改按钮元素的背景颜色。您还可以将主题设置用于其他自定义，例如默认组件属性等。有关更多信息，请查看文档

Answer 3

相反，如果有人想更改特定组件的颜色

您可以使用Button组件的buttonStyle属性。在其中，您可以将样式设置为常规样式，例如backgroundColor和color

  import {Button} from 'react-native-elements'

  <Button
      buttonStyle={{
         backgroundColor: "red"
      }}

      containerStyle={{
         marginTop: 12,
         width: "40%"
      }}

      title="Cancel"
   />

检查官方文档：https://react-native-elements.github.io/react-native-elements/docs/button.html#buttonstyle

Answer 4

根据他们的文档，您可以将backgroundColor属性作为字符串传递，而不必通过style传递它。这是一个例子：

<Button
  backgroundColor={'red'}
  large
  iconRight
  icon={{name: 'code'}}
  title='LARGE WITH RIGHT ICON' 
/>

但如果您要在多个地方使用相同的确切按钮，那么您可能只想创建自己的组件并将其包装。

更多信息：https://github.com/react-native-community/react-native-elements#buttons