react中竖直轮播滚动_用水平滚动视图React本地轮播

<article style="font-size: 16px;">
<p>react中竖直轮播滚动</p>
<div>
  <section>
<div>
<div>
   <h2> ScrollView：可以全部统治一个组件吗？ <span style="font-weight: bold;">(</span>ScrollView: One component to rule them all?<span style="font-weight: bold;">)</span></h2>
   <p><code><a href="https://facebook.github.io/react-native/docs/scrollview" rel="noopener noreferrer" target="_blank">ScrollView</a></code> is one of the most fundamental components of a React Native app, that can act as a standalone component as well as a dependency for a range of other more complex components.</p>
   <p> <code><a href="https://facebook.github.io/react-native/docs/scrollview" rel="noopener noreferrer" target="_blank">ScrollView</a></code>是React Native应用程序的最基本组件之一，它既可以充当独立组件，又可以作为一系列其他更复杂组件的依赖项。 </p>
   <p>It is impressive thinking about its wide-ranging use-cases. It can be used as a standalone vertical scrolling solution, automatically making your content suitable for any screen height. Other more complex components, like <code><a href="https://facebook.github.io/react-native/docs/sectionlist" rel="noopener noreferrer" target="_blank">SectionList</a></code> and <code><a href="https://facebook.github.io/react-native/docs/flatlist" rel="noopener noreferrer" target="_blank">FlatList</a></code>, rely on <code>ScrollView</code> and its props, whereas community driven components like <code><a href="https://www.npmjs.com/package/react-native-keyboard-aware-scrollview" rel="noopener noreferrer" target="_blank">KeyboardAwareScrollView</a></code> expand upon <code>ScrollView</code>’s functionality to solve complicated UX problems with the virtual keyboard.</p>
   <p> 关于其广泛的用例，令人印象深刻。它可以用作独立的垂直滚动解决方案，自动使您的内容适合任何屏幕高度。其他更复杂的组件(如<code><a href="https://facebook.github.io/react-native/docs/sectionlist" rel="noopener noreferrer" target="_blank">SectionList</a></code>和<code><a href="https://facebook.github.io/react-native/docs/flatlist" rel="noopener noreferrer" target="_blank">FlatList</a></code> )依赖于<code>ScrollView</code>及其道具，而社区驱动的组件(如<code><a href="https://www.npmjs.com/package/react-native-keyboard-aware-scrollview" rel="noopener noreferrer" target="_blank">KeyboardAwareScrollView</a></code>扩展了<code>ScrollView</code>的功能来解决虚拟键盘的复杂UX问题。 </p>
   <p>And these use cases just entail vertical scrolling. <code>ScrollView</code> also supports horizontal scrolling and pinch to zoom — that tracks the current magnification with the <code><a href="https://facebook.github.io/react-native/docs/scrollview#zoomscale" rel="noopener noreferrer" target="_blank">zoomScale</a></code> prop, along with others to limit its minimum, maximum and zoom behaviour. This makes <code>ScrollView</code> ideal for panning around maps-based applications, or apps with large canvases like boardgames.</p>
   <p> 这些用例仅需要垂直滚动。 <code>ScrollView</code>还支持水平滚动和收缩缩放-使用<code><a href="https://facebook.github.io/react-native/docs/scrollview#zoomscale" rel="noopener noreferrer" target="_blank">zoomScale</a></code>道具跟踪当前的放大倍率，并限制其最小，最大和缩放行为。这使<code>ScrollView</code>非常适合在基于地图的应用程序或带有大型画布的应用程序(如棋盘游戏)之间平移。 </p>
   <p>The particular use-case this article focusses on, however, is that of a horizontal-only scrollable carousel component that allows the user to swipe through a range of items (or intervals). This is a very common feature in apps today, being utilised to display and structure a range of data:</p>
   <p> 但是，本文关注的特定用例是只允许用户在一系列项目(或间隔)中滑动的仅水平可滚动轮播组件。这是当今应用程序中非常常见的功能，可用于显示和构造一系列数据： </p>
   <figure style="display:block;text-align:center;">
   <div>
   <div>
      <div>
      <div>
      <div style="text-align: center;">
         <img alt="Image for post" height="973" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-aa5321066f86ed103220e67c68815841.png" style="outline: none;" width="1570">
      </div>
      </div>
      </div>
   </div>
   </div>
   <figcaption>
   Common use cases carousels are used in apps
   </figcaption>
   <figcaption>
      应用中使用了常见用例轮播
   </figcaption>
   </figure>
   <p>We’ll explore a range of props and event handlers <code>ScrollView</code> offers to make this happen, as well as custom logic for handling carousel state. The demo project referenced in this article is also available <a href="https://github.com/rossbulat/rn-carousel" rel="noopener noreferrer" target="_blank">on Github</a>, where two styles of carousel are showcased.</p>
   <p> 我们将探究<code>ScrollView</code>提供的各种道具和事件处理程序，以实现此目标，以及用于处理轮播状态的自定义逻辑。 <a href="https://github.com/rossbulat/rn-carousel" rel="noopener noreferrer"