已封住的公共组件,可直接引入使用
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('点击触发')
}}
>