Question

在我的应用中，我使用<ScrollView />查看水平滚动的图书页面。当用户到达<ScrollView />的末尾时，会出现一个反弹，显示右侧的白色区域，只有当用户将最后一页拖到左侧时才会显示。我想在那里添加一些文字，上面写着＆＃34; The End＆＃34;垂直。如何在跳出区域的<ScrollView />右侧添加内容？

Answer 1

我几乎想通了。这是关闭但显示在最后一页的右侧，但不显示在反弹区域右侧的页面上。我希望它显示在“页面右侧”而不是“页面右侧”。还有其他想法吗？

使用此样式创建<View style={styles.end} />：

theEnd: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 100,
    height: 768, // Device height
    alignItems: 'center',
}

将它放在<ScrollView />之前，并使用“theEnd”样式将要显示的内容放在View组件内。

Answer 2

这可能不适用于您的内容，但除了ScrollView内容的大图片外，我的情况相同。我想要水平和垂直滚动，图像的边缘只会出现在反弹边缘。我发现scale转换对此非常有用：

<ScrollView horizontal={true}>
  <Image
    source={require('./img/map.jpg')}
    style={{transform: [{scale: 1.1}]}}
  />
</ScrollView>

因此图像占据了其盒子高度和宽度的110％（然后在更小的ScrollView内）。

编辑：仅供参考，经过测试，发现这只能在iOS上运行，而不适用于Android。（如果你将水平设置为true，Android不会允许垂直滚动，而且我认为它没有将部分渲染到正常查看区域之外，因此反弹边距是空的。）

Answer 3

为此有一个名为contentContainerStyle

的道具

<ScrollView 
  horizontal={true} 
  contentContainerStyle={{
    paddingLeft: 25,
    paddingRight: 25,
  }}>
 *** CONTENT ***
</ScrollView>

在React Native中添加ScrollView的跳出范围内容？

3 个答案: