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

我有一个非常高但不是很大的图像。我想在滚动视图中打印它，所以你可以在一个屏幕上看到它，但没有任何工作。React Native：在Scrollview中打印完整图像

，宽度和高度以及flexs我的滚动视图和我的形象打后，最好的结果我得到的是当我对他们的风格= {{宽度=“100％”}}，这样

<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>

我结束了

至极可以向下滚动到看到的Imag其余即正如你所看到的，它可以垂直导航，但不占用整个屏幕的宽度

来源

2017-08-25 General Baguettson

我很困惑 - 你想使图像出现在*单*屏，如调整大小，或者试图把它放在一个滚动视图，以便它可以通过滚动？ – Kraylog

我添加了一个drawgin，表示图像我有，我希望我的phoone屏幕 –

下可能会有帮助：

您可以使用contentContainerStyle的风格了滚动的内容。像这样（你有什么本质）：

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

这对我的作品 - 我可以向下滚动整个图像，并在底部它保持可见。

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

Here是官方采取图片大小调整...和getting device dimensions也将在这里有用。

来源

2017-08-25 13:48:11 sinewave440hz

什么我会让它与图形更清晰，给我一分钟 –

好吧，不过你在图中显示的行为就是你得到的在我的答案中使用ScrollView代码。我能想到的唯一可能的意思不是你想要的，如果你想在图像底部留出更多的空间。如果是这样，只需将图像包装在视图中，并用paddingBottom将其设置为所需的额外大小...应该这样做。 – sinewave440hz

我刚回到我的电脑，所以我测试了答案的第一部分。它看起来没问题，但它并不占用整个屏幕的宽度：图像可以垂直导航，就像我想的那样，但它不占用整个宽度：/ 我编辑了我的问题给你一个更直观的例子。 –

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

回答

相关问题