如何更改 react-native-paper 中按钮的波纹颜色

Question

我正在为我的应用程序使用 react-native-paper 中的 Button 组件。我将背景设置为某个值。如何更改触摸时出现的波纹颜色。

我的按钮组件

<Button
    mode="contained"
    style={styles.button}
    labelStyle={styles.buttonLabel}
    uppercase={false}
    onPress={() => {}}
>
    Click Here
  </Button>

使用的样式

button: {
  marginTop: 30,
  backgroundColor: Colors.BRIGHT_YELLOW,
  padding: 5,
  borderRadius: 10
},
buttonLabel: {
  fontFamily: FONT_FAMILY.POPPINS_MEDIUM,
  fontSize: FONT_SIZE[18],
  color: Colors.PURE_WHITE
}

Answer 1

工作示例：Expo Snack

您可以使用 TouchableRipple 代替：

import * as React from 'react';
import { View } from 'react-native';
import { Text, TouchableRipple } from 'react-native-paper';

const MyComponent = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <TouchableRipple
      onPress={() => console.log('Pressed')}
      rippleColor="rgba(255,0,0, 1)"
      style={{ backgroundColor: 'grey', padding: 10, borderRadius: 5 }}>
      <Text>Press anywhere</Text>
    </TouchableRipple>
  </View>
);

export default MyComponent;

文档：touchable-ripple

Answer 2

<Button
    mode="contained"
    style={styles.button}
    color={your_color}
    labelStyle={styles.buttonLabel}
    uppercase={false}
    onPress={() => {}}
>
    Click Here
  </Button>

发挥作用

如何更改 react-native-paper 中按钮的波纹颜色

How to change ripple color of button in react-native-paper

react-native

react-native-paper