React-native-gesture-handler: 子で覆われたBaseButtonリップル `<image/> `

絶対塗りつぶしを回避策として使用し、絶対塗りつぶしを使用してビューとスタイルボタンでボタンと画像を折り返すことができます。ところで、rippleColorも指定する必要があります。そうしないと、奇妙な動作が発生します。

これが、RNのTouchableNativeFeedbackコンポーネントにuseForeground小道具がある理由です。 RNGHの3つのボタンコンポーネントは、この動作を模倣する必要があります。

ところで、「絶対充填」の回避策は私にはうまくいきません。

Ripple.jsをラップします

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

const styles = StyleSheet.create({
  box: {
    position: 'relative',
  },
  ripple: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: '100%',
    height: '100%',
    zIndex: 1,
  },
});

export default ({ style, children, ...props }) => {
  return (
    <View style={[style, styles.box]}>
      {children}
      <RectButton rippleColor="#888" style={styles.ripple} {...props} />
    </View>
  );
};