react-native-panrespondertouchview
v1.0.1
Published
Gesture animation
Downloads
9
Maintainers
Readme
react-native-panrespondertouchview
React-Native PanResponder unite Animated ,Support iOS Android;
npm install react-native-panrespondertouchview --save
use
import {PanResponderTouchView} from "react-native-panrespondertouchview"
onNarrowA(index){
alert("点击了第"+index+"张图片");
this.refs.PanResponderTouchView.onNarrowView();
}
subView(){
return <View style={{ flex: 1, }}>
<View style={{ width: CIRCLE_SIZEMax, height: CIRCLE_SIZEMax / 2, justifyContent: 'space-around', flexDirection: 'row' }} >
<TouchableOpacity onPress={() => this.onNarrowA(1)} activeOpacity={1} style={{ width: CIRCLE_SIZEMax / 2, height: CIRCLE_SIZEMax / 2, }} >
<Image source={require('./app/images/antivirus_scanner.png')} style={{ width: CIRCLE_SIZEMax / 2, height: CIRCLE_SIZEMax / 2 }} />
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onNarrowA(2)} activeOpacity={1} style={{ width: CIRCLE_SIZEMax / 2, height: CIRCLE_SIZEMax / 2, }} >
<Image source={require('./app/images/iris_scan.png')} style={{ width: CIRCLE_SIZEMax / 2, height: CIRCLE_SIZEMax / 2 }} />
</TouchableOpacity>
</View>
<View style={{ width: CIRCLE_SIZEMax, height: CIRCLE_SIZEMax / 2, justifyContent: 'space-around', flexDirection: 'row' }} >
<TouchableOpacity onPress={() => this.onNarrowA(3)} activeOpacity={1} style={{ width: CIRCLE_SIZEMax / 2, height: CIRCLE_SIZEMax / 2, }} >
<Image source={require('./app/images/iris_scan.png')} style={{ width: CIRCLE_SIZEMax / 2, height: CIRCLE_SIZEMax / 2 }} />
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onNarrowA(4)} activeOpacity={1} style={{ width: CIRCLE_SIZEMax / 2, height: CIRCLE_SIZEMax / 2, }}>
<Image source={require('./app/images/bullet_camera.png')} style={{ width: CIRCLE_SIZEMax / 2, height: CIRCLE_SIZEMax / 2 }} />
</TouchableOpacity>
</View>
</View>
}
_onTouchEnd(event){
this.refs.PanResponderTouchView.onTouchEnd(event)
}
render() {
return (
<View style={styles.container} onTouchEnd={(event) => this._onTouchEnd(event)}>
<PanResponderTouchView ref={"PanResponderTouchView"} subView={this.subView()} defaultPosition={{ x: 2, y: (ScreenHeight / 2.0) }}/>
</View>
);
}
PanResponderTouchView.defaultProps = {
superOnonNarrow: function superOnonNarrow() { },
narrowTimer: 4000,
highlightBackColor: '#222222',
unHighlightBackColor: '#666666',
defaultPosition: { x: 2, y: (ScreenHeight / 2.0) },
CIRCLE_SIZE:60,
CIRCLE_SIZEMax:296,
boundaryValue:2
};