Prohibit any panResponder when longPress to show menu

[1uokun]

如题🐶

When I open the menu, Responder still exists in ImageZoom.

See the detail in ⬇️ gif

[1uokun]

How to custom menus?

The second PR is a enhancement, can ignorable.

Here is Using demo:

/* 仿微信朋友圈查看大图功能 */
import React from 'react'
import {View,Text,Animated,Easing,TouchableOpacity} from 'react-native'
import ImageViewer from 'react-native-image-viewer';

export default class ImageViewBase extends React.Component {
    render(){
        return (
            <View style={{flex:1}}>
                <ImageViewer
                    imageUrls={[{url:'https://avatars2.githubusercontent.com/ml/1362'}]}
                    index={0}
                    enableSwipeDown={true}
                    menus={({cancel,saveToLocal})=><Menus cancel={cancel} saveToLocal={saveToLocal}/>}
                />
            </View>
        )
    }
}

class Menus extends React.Component {
    constructor(props){
        super(props);
        this.animatedValue = new Animated.Value(0)
    }

    animate=()=>{
        this.animatedValue.setValue(0);
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 200,
                easing: Easing.linear
            }
        ).start();
    };

    componentDidMount() {
        this.animate()
    }

    render(){
        const menus = [
            {title:'发送给朋友',onPress:()=>{}},
            {title:'收藏',onPress:()=>{}},
            {title:'保存图片',onPress:this.props.saveToLocal},
            {title:'编辑',onPress:this.props.cancel},
        ];
        const rotate= {
            transform: [
                {
                    translateY: this.animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [150,0]
                    })
                }
            ]
        };
        return (
            <View style={{flex:1}}>
                <View style={{flex:1}} onStartShouldSetResponder={this.props.cancel}/>
                <Animated.View style={rotate}>
                    {menus.map((a,i)=>{
                        return (
                            <TouchableOpacity key={i} onPress={a.onPress}>
                                <View style={{marginBottom: 1,backgroundColor:'#FFFFFF',paddingVertical: 20}}>
                                    <Text style={{textAlign: 'center'}}>{a.title}</Text>
                                </View>
                            </TouchableOpacity>
                        )
                    })}

                    <TouchableOpacity onPress={this.props.cancel}>
                        <View style={{marginTop:3,backgroundColor:'#FFFFFF',paddingVertical: 15}}>
                            <Text style={{textAlign: 'center'}}>取消</Text>
                        </View>
                    </TouchableOpacity>
                </Animated.View>
            </View>
        )
    }
}