React Native：在Scrollview中打印完整图像

Question

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

在为我的scrollview和我的图片播放宽度和高度以及弹性后，我得到的最好结果是当我使用style = {{width =＆＃39; 100％＆＃39;}}时，像那样

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

以全宽打印图像，但是滚动视图的高度是原始图像的高度，它不会让我看到整个已调整大小的图像。

这是一张糟糕的图画来表示我的图片，以及我希望在手机屏幕上看到的内容

编辑： 这段代码：

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

我最终

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

Answer 1

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 }}
   />
 );
};

并像这样使用它：

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

Answer 2

以下内容可能有所帮助：

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

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

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

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

Here是图片大小调整的正式版本...... getting device dimensions在这里也很有用。