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

【问题标题】：How to change ripple color of button in react-native-paper如何在 react-native-paper 中更改按钮的波纹颜色
【发布时间】：2021-01-21 14:58:06
【问题描述】：

我正在为我的应用程序使用来自 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
}

【问题讨论】：

标签： react-native react-native-paper

【解决方案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

【讨论】：

我只能使用TouchableRipple吗，Button没有任何解决方法吗？
我已经检查了 Button 的文档，但遗憾的是我找不到任何支持自定义涟漪效果的道具，但它有一个单独的组件 TouchableRipple 为此目的而定制，所以这是一个很好的选择.

【解决方案2】：

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

搞定

【讨论】：