2017-02-09 212 views
1

現在我正在使用react-native-elements我的應用程序的組件庫。具體來說,我正在使用它們的Button組件,其中應用了默認的灰色顏色。如何指定react-native-elements按鈕的默認顏色?

enter image description here

我如何設置這些按鍵的自定義默認顏色,而無需在風格的道具,每次通過?

是否有一個簡單的函數/方法我可以調用,或者我必須看看創建一個自定義組件來包裝它?我更喜歡前者。

+0

您需要創建一個自定義組件。 –

回答

3

我繼續,並提出了包裝類現在。如果有人發現如何做到另一種方式,請張貼。

要做到這一點我做了以下

-Imported從反應本土元素

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

按鈕類-Created一個組件類,我沿着全部通過我發送到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 
    ) 
    } 
} 

-Exported它作爲一個模塊,便於重複使用

module.exports = ButtonCustom; 

每當我需要它,我簡單地導入和使用它。我至少不需要每次設置樣式,如果需要,我可以進行全局更改。

<ButtonCustom 
      title="Blue Automatically" 
      /> 
0

根據他們的文檔,您可以將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

+0

是的,我想避免按鈕顏色的事情,這樣我甚至可以在一個地方更新所有。我會研究它的定製。謝謝 – Tope

相關問題