React-native-gesture-handler: تموج BaseButton مغطى بالطفل ``<image/> "

تم إنشاؤها على ١ أبريل ٢٠١٩ · 3تعليقات · مصدر: software-mansion/react-native-gesture-handler

القضية:

BaseButton ripple يعمل بشكل جيد مع النص كطفل ، ولكن ليس مع الصورة.

لإعادة إنتاج:

<BaseButton style={{height: 150, width: 100}}>
   <Image source={...} style={{width: 100, height: 100}}/>
</BaseButton>

"معالج الإيماءات التفاعلية": "^ 1.0.16" ،
"رد فعل": "16.8.3"،
"تفاعل أصلي": "0.59.1"،

الجهاز المختبَر: Samsung Galaxy S6 ، Android 7.0

Android Bug

مصدر

chhornponleu

👍1

التعليق الأكثر فائدة

هذا هو السبب في أن مكون RN TouchableNativeFeedback يحتوي على useForeground . يجب أن تحاكي مكونات الأزرار الثلاثة في RNGH هذا السلوك.

الحل البديل "الملء المطلق" لا يعمل بالنسبة لي ، راجع للشغل.

TheWirv في ٢١ يونيو ٢٠١٩

👍2

ال 3 كومينتر

يمكنك استخدام الملء المطلق كحل بديل وزر التفاف وصورة في عرض وزر نمط بتعبئة مطلقة ، بالمناسبة لا بد لي من تحديد rippleColor أيضًا أو أحصل على سلوك غريب.

eyousefifar في ٨ أبريل ٢٠١٩

👍2 👎1

الحل البديل "الملء المطلق" لا يعمل بالنسبة لي ، راجع للشغل.

TheWirv في ٢١ يونيو ٢٠١٩

👍2

التفاف 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>
  );
};