React Native 自定义扩大点击区域&&不影响原布局

最新推荐文章于 2024-06-20 15:57:12 发布

coder_wangs

最新推荐文章于 2024-06-20 15:57:12 发布

阅读量427

点赞数 10

文章标签： react native react.js javascript typescript

本文链接：https://blog.csdn.net/web_wp/article/details/135451232

版权

已封住的公共组件，可直接引入使用

import React from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';
interface ExpandableHotZoneProps {
  onPress: (...args: any[]) => void;
  children: any;
  customStyle: object;
}
const ExpandableHotZone: React.FC<ExpandableHotZoneProps> = props => {
  return (
    <TouchableOpacity
      activeOpacity={1}
      style={styles.buttonContainer}
      onPress={props.onPress}
    >
      <View>{props.children}</View>
      <View style={{ ...styles.hotspot, ...props.customStyle }} />
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  buttonContainer: {
    position: 'relative'
  },
  hotspot: {
    position: 'absolute',
    opacity: 1, // 透明的叠加视图
    backgroundColor: 'rgba(240,7,245,0.5)'
  }
});
export default ExpandableHotZone;

调用方式

        <ExpandableHotZone
          customStyle={{
            top: px(-10),
            bottom: px(-10),
            left: px(-10),
            right: px(-10)
          }}
          onPress={() => {
            console.log('点击触发')
          }}
        >