React native 反应本机：在滚动视图中打印完整图像

我有一个非常高的图像，但不是很大。我想在滚动视图中打印它，这样您就可以在一个屏幕上看到所有内容，但没有任何效果

在为我的scrollview和我的图像使用宽度、高度和弯曲度之后，我得到的最佳结果是当我使用style={{width='100%'}打开它们时，就像这样

<ScrollView style={{width: '100%'}}>
    <Image
      source={require('./assets/skeleton/fullSkeleton.png')}
      resizeMode='cover'
      />
  </ScrollView>

它以全宽打印图像，但scrollview的高度是原始图像的高度，这不允许我看到整个调整大小的图像

这里，一个糟糕的绘图来代表我的图像，以及我想在手机屏幕上看到的内容

编辑： 使用这段代码：

<ScrollView
  contentContainerStyle={{alignItems: 'center'}}>
    <Image
      source={require('./fullSkeleton.png')}
      resizeMode='cover'
      />
</ScrollView>

我最终得到了

---

可以向下滚动以查看图像的其余部分。如您所见，它可以垂直导航，但不占用整个屏幕的宽度。以下内容可能会有所帮助：

可以使用contentContainerStyle设置ScrollView内容的样式。像这样（基本上就是你所拥有的）：

这对我来说很有用-我可以向下滚动整个图像，在底部它保持可见

注意：要使图像覆盖整个屏幕，同时保持所需的高度，您需要专门设置宽度。在我的iphone7+上，这意味着向图像组件添加style={{width:414}}，并将resizeMode更改为“stretch”

---

这是对图像大小调整的官方看法……在这里也会很有用。

在Reat Native中，这种事情实际上相当棘手。但是你可以很容易地做到；首先获取图片尺寸：

const FullWidthPicture = ({ uri }) => {
  const [ratio, setRatio] = useState(1);
  useEffect(() => {
    if (uri) {
      Image.getSize(uri, (width, height) => {
         setRatio(width / height);
      });
   }
  }, [uri]);

  return (
   <Image
     style={{ width: '100%', height: undefined, aspectRatio: ratio }}
     resizeMode="contain"
     source={{ uri }}
   />
 );
};

constfullwidthPicture=（{uri}）=>{
常数[比率，设置比率]=使用状态（1）；
useffect（（）=>{
如果（uri）{
Image.getSize（uri，（宽度，高度）=>{
设置比率（宽度/高度）；
});
}
}，[uri]）；
返回(
);
};

然后像这样使用它：

<ScrollView style={{flex: 1}}>
  <FulWidthImage uri={pictureUri} />
</ScrollView>

我很困惑-您是想让图像显示在一个屏幕上，如调整大小，还是想将其放在滚动视图中，以便可以滚动？我添加了一个drawgin，表示我拥有的图像，以及我想要在phoone屏幕上显示的内容OK，但是您在图表中显示的行为是使用我的答案中的ScrollView代码得到的。我能想到的唯一一件事是，如果你想在图片底部有更多的空间，那么你的意思可能不是你想要的。如果是这样，只需将图像包装在视图中，并使用paddingBottom将其样式设置为您想要的额外大小…这应该可以做到。我刚回到电脑，所以我测试了您答案的第一部分。看起来还可以，但它不占用整个屏幕的宽度：图像可以垂直导航，正如我所希望的，但它不占用整个宽度：/I我编辑了我的问题，以给您提供一个更直观的示例。有相同的问题，您有解决方案吗？：（不为我工作..显示空白页.在RN工作2年后，我受够了..真的.这么小的要求，在上面浪费了这么多时间..真的更喜欢本土化，顺利发展2次..抱歉，需要把它拿出来..我很恼火，这正是我想要的，谢谢！我在找这个.老兄y tks

<ScrollView style={{flex: 1}}>
  <FulWidthImage uri={pictureUri} />
</ScrollView>