javascript - React native paper button background color - Stack Overflow

admin管理员组

文章数量:1415664

I have this button from .html

<Button onPress={goSignUp}>
    Sign Up
</Button>

It hasn't got a background color (just what I want), but when I press it, a background color with a ripple fades in. How do I remove the onPress background color?

I have this button from https://callstack.github.io/react-native-paper/button.html

<Button onPress={goSignUp}>
    Sign Up
</Button>

It hasn't got a background color (just what I want), but when I press it, a background color with a ripple fades in. How do I remove the onPress background color?

• javascript
• reactjs
• react-native
• material-design
• expo

Share Improve this question Follow asked Jun 22, 2020 at 10:56 user13594285user13594285

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Please use TouchableOpacity

if you used TouchableHighlight Try to add this

 <TouchableHighlight underlayColor='none' />

You may ask, why don't you use a touchable opacity instead of the button? The answer is that I have more buttons (with background color) and I want to have all buttons with the same default style which es with react-native-paper.

I have found a solution (wrap the button inside the TouchableOpacity) but I think there has to be a better way...

<TouchableOpacity onPress={goSignUp}>
   <Button style={styles.button}>Sign Up</Button>
</TouchableOpacity>

This library has a prop for buttons called mode, you can try pass mode props to it, or just use your custom style

<Button mode='contained'>Sign Up</Button>

or

<Button style={{width: 200, height: 50, backgroundColor: 'blue'}}>Sign Up</Button>

Try this.

         <Button 
            mode="contained"
            buttonColor='#001871'
            onPress={() => console.log('Button Pressed')}>SAVE
          </Button>

You can give styles as same as react native default. as an example-

<Button style={{backgroundColor: 'orange'}} icon="account-plus-outline" mode="contained-tonal" onPress={() => console.log('Pressed')}>
            Register me! </Button>

本文标签： javascriptReact native paper button background colorStack Overflow