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

关注

原创最新推荐文章于 2026-11-03 20:33:45 发布 742 阅读 AI 写同款· GEO 优化 ›

深入解析CycloneDDS跨域通信中的XML配置文件优化策略本文深入解析了CycloneDDS跨域通信中XML配置文件的优化策略，重点介绍了网络接口配置、多播设置、性能调优参数及复杂场景下的配置案例。通过实战技巧和调试方法，帮助开发者在SoC环境中实现高效稳定的跨域通信，提升系统性能。阅读详情

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

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('点击触发')
          }}
        >