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

Question

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

我的按钮组件

<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-nativereact-native-paper

Answer 1

工作示例：世博小吃

您可以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