如何使全尺寸图像像地图一样水平和垂直滚动答案

【问题标题】：How to make a full-sized image scrollable horizontally and vertically just like a map如何使全尺寸图像像地图一样水平和垂直滚动
【发布时间】：2019-11-08 09:31:13
【问题描述】：

我正在尝试使图像可水平、垂直、缩放，并允许我在图像上放置标记。真的，它就像谷歌地图，但它是一张信息图。

我试图将它放在两个滚动视图中，在这里得到了回答： https://github.com/facebook/react-native/issues/2962。我试过了，但它不起作用。

<ScrollView>
  <ScrollView horizontal>
    <image horizontalAlignment="center" verticalAlignment="center" src="~/assets/images/body.png" stretch="aspectFull"/>
  </ScrollView>
</ScrollView>

aspectFull 允许我显示图像的实际分辨率，但它只允许我垂直滚动。

总之，我想让它的行为与 Google Map 一样，但使用的是图像。

谢谢

【问题讨论】：

你想拥有垂直和水平滚动条吗？或者像在谷歌地图中一样通过拖动鼠标滚动？
嵌套 ScrollViews 需要在各个平台上采用不同的实现方式，如果我没记错的话，您正在寻找类似 @987654322@ 的插件，它允许用户捏合/缩放和移动图像。

标签： reactjs vue.js nativescript nativescript-vue

【解决方案1】：

我已经设法让它工作，只是为了满足我的最低限度的问题。但是，结果并不是很理想，因为它限制用户一次只能在一个方向滚动（例如，您将无法对角滚动。）无论如何，这将是另一个问题，所以这是答案：

<ScrollView  orientation="vertical">
    <ScrollView  orientation="vertical">
        <ScrollView width="823" orientation="horizontal">
            <ScrollView width="823" orientation="horizontal">
                <image loadMode="async" horizontalAlignment="center" verticalAlignment="center" src="~/assets/images/body.png" stretch="aspectFull"/>
            </ScrollView>
        </ScrollView>
    </ScrollView>
  </ScrollView>
</ScrollView>

注意：内部滚动视图的宽度设置为与图像的宽度相同。

【讨论】：