如何使用 React Hooks（useState 等）在 React Native 中创建图像幻灯片（水平）？ [关闭]答案

【问题标题】：How can I create an Image SlideShow(horizontal) in React Native using React Hooks(useState etc...)? [closed]如何使用 React Hooks（useState 等）在 React Native 中创建图像幻灯片（水平）？ [关闭]
【发布时间】：2020-02-24 11:20:34
【问题描述】：

如何创建自动定时幻灯片（水平）。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

使用这个库，您可以创建幻灯片 “反应原生图像滑块框” 工作示例：https://snack.expo.io/@msbot01/d5a028

    export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          images: [
            "https://source.unsplash.com/1024x768/?nature",
            "https://source.unsplash.com/1024x768/?water",
            "https://source.unsplash.com/1024x768/?girl",
            "https://source.unsplash.com/1024x768/?tree"
          ]
        };
      }
      render() {
        return (
          <View style={styles.container}>
            <SliderBox
              autoplay={true}
              circleLoop={true}
              images={this.state.images}
              onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
              currentImageEmitter={index => console.warn(`current pos is: ${index}`)}
            />
          </View>
        );
      }
    }

【讨论】：

谢谢，但幻灯片结束后它永远不会循环回第一张图片你能在这里给我看一下 SliderBox 组件吗？这样我就可以检查它的内部工作了
只需在 SliderBox 中添加“circleLoop={true}”即可更新示例

【解决方案2】：

在这个例子中，我将把我们的滑块构建成浏览器的全高和全宽，以使事情变得简单。

滑块组件

 import React, { useState } from 'react'
 /**
 * @function Slider
 */
const Slider = () => {
return 
 <div>
   {/*  */}
 </div>
 }

export default Slider

设置滑块组件的样式

我在下面分解了我的解决方案。

Slider 将创建一个容器，设置为我们想要的任何尺寸，在我们的示例中将是浏览器高度和宽度的 100%。
SliderContent 将用于容纳我们所有的幻灯片，并将被设计为水平溢出 Slider。这将允许我们将除当前活动的一张之外的所有幻灯片放置在屏幕外。

现在你已经有了一个框架解决方案，请阅读这篇关于 React Slider: How To Build A Slider With React Hooks 的文章。

https://medium.com/@ItsMeDannyZ/build-an-image-slider-with-react-es6-264368de68e4

希望这会有所帮助。

【讨论】：