有滚动条时地图对触摸没有反应答案

【问题标题】：map does not react to touch when there is scroll bar有滚动条时地图对触摸没有反应
【发布时间】：2017-05-23 13:18:00
【问题描述】：

我使用的是android，为什么当有滚动条时，地图对触摸事件没有流畅的反应。我正在尝试拖动地图，但整个页面正在向上滚动。我们如何让当我们在地图内部拖动时，只有地图容器会响应触摸事件？

如果屏幕上没有滚动条/只有传单，地图会优雅地平移/拖动。

PS：我尝试在地图选项中设置 tap:false，但它不起作用。我正在使用传单 1.0.3

示例代码：

MainForm 组件

  <Container>
                <Header>
                <Title>Main</Title>
                </Header>
                <Content>
                <TestWV />
                <Grid>
                    <Col style={{ height: 700, 
                                    justifyContent: 'center',
                                    alignItems: 'center', }}
                    >
                        <Row size={1} >
                            <TouchableOpacity onPress={this.onMiniApp1Press.bind(this)}>
                                <Thumbnail square size={100} source={oneminute} 
                                />
                            </TouchableOpacity>
                        </Row>
                        <Row size={1} >
                        </Row>
                    </Col>
                    <Col style={{ height: 700, 
                                    justifyContent: 'center',
                                    alignItems: 'center', }}
                    >
                        <Row size={1} >
                            <TouchableOpacity>
                                <Thumbnail square size={100} source={pakipoo} 
                                />
                            </TouchableOpacity>
                        </Row>
                        <Row size={1} >
                        </Row>
                    </Col>
                </Grid>
                </Content>
            </Container>

TestWV 组件

     <View>
     <WebView
        source={{uri: 'http://yahoo.com'}}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        style={{ height: 500, flex: 1 }}

        >
    </WebView>
    </View>

【问题讨论】：

您具体使用什么框架和版本？您使用什么混合/跨平台工具构建您的应用程序？无法在 Android 设备上重现您的 Cordova 问题。
反应原生。但我相信这与平台无关..我可以给你发送一些 html 文件，你可以将它加载为 webview...
确实请提供重现您的问题所必需的内容，否则我不确定您能否获得有意义的帮助...
@ghybs 我添加了示例反应代码。你能告诉我你是否可以把它转换成类似cordova/html的代码吗？我希望你能明白。让我知道任何问题。

标签： android react-native leaflet

【解决方案1】：

你可以制作一个简单的自定义地图，重写onTouchEvent()方法让

    @Override
public boolean onTouchEvent(MotionEvent ev) {
    int action = ev.getAction();
    switch (action) {
    case MotionEvent.ACTION_DOWN:
        // Disallow ScrollView to intercept touch events.
        this.getParent().requestDisallowInterceptTouchEvent(true);
        break;

    case MotionEvent.ACTION_UP:
        // Allow ScrollView to intercept touch events.
        this.getParent().requestDisallowInterceptTouchEvent(false);
        break;
    }

    // Handle MapView's touch events.
    super.onTouchEvent(ev);
    return true;
}

在this answer 中发现了另一种方法（但我认为它是一样的）

【讨论】：

【解决方案2】：

因为，ScrollBar 不支持嵌套滚动。而且 MapView 有自己的 Scroll 行为

【讨论】：

有什么建议可以解决吗？
我对传单一无所知。但是你可以扩展视图并自己做 onTouch