幻燈片影像如何自動更改影像ReactNative-有解無憂

import { View, StyleSheet } from "react-native";
import Slideshow from "react-native-image-slider-show";

const ImageSlider = () => {
  return (
    <View>
      <Slideshow
        dataSource={[
          {
            title: "Burger 1",
            caption: "Original  Cheezy Meat",
            url: "https://assets.epicurious.com/photos/5c745a108918ee7ab68daf79/5:4/w_3129,h_2503,c_limit/Smashburger-recipe-120219.jpg",
          },
          {
            title: "Burger 2",
            caption: "100% Original Beef",
            url: "https://www.thespruceeats.com/thmb/vJUFf6L4p8y9Cn_1pE9Z7Ua9uok=/3000x2001/filters:fill(auto,1)/indian-style-burger-1957599-hero-01-266103a4bb4e4ee7b5feb4da2d2e99da.jpg",
          },
          {
            title: "Burger 3",
            caption: "Mouthfull Of Happiness",
            url: "https://www.thespruceeats.com/thmb/l4w6PvMqsz1EjueCAh_foPmYafM=/3456x3456/smart/filters:no_upscale()/garlic-burger-patties-333503-hero-01-e4df660ff27b4e5194fdff6d703a4f83.jpg",
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({});

export default ImageSlider;

您好，我希望我的影像在 5 秒后自行改變。我嘗試在我的 app.js 中添加 autoplay={true} 但它不起作用。我想知道有什么方法可以做到這一點。謝謝你。

uj5u.com熱心網友回復：

您應該能夠通過使用以下react-native-image-slider-show檔案改編來實作自動滑塊。

可以在這里找到一個作業示例

import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from "react-native";
import Slideshow from "react-native-image-slider-show";

const dataSource = [
  {
    title: "Burger 1",
    caption: "Original  Cheezy Meat",
    url:
      "https://assets.epicurious.com/photos/5c745a108918ee7ab68daf79/5:4/w_3129,h_2503,c_limit/Smashburger-recipe-120219.jpg"
  },
  {
    title: "Burger 2",
    caption: "100% Original Beef",
    url:
      "https://www.thespruceeats.com/thmb/vJUFf6L4p8y9Cn_1pE9Z7Ua9uok=/3000x2001/filters:fill(auto,1)/indian-style-burger-1957599-hero-01-266103a4bb4e4ee7b5feb4da2d2e99da.jpg"
  },
  {
    title: "Burger 3",
    caption: "Mouthfull Of Happiness",
    url:
      "https://www.thespruceeats.com/thmb/l4w6PvMqsz1EjueCAh_foPmYafM=/3456x3456/smart/filters:no_upscale()/garlic-burger-patties-333503-hero-01-e4df660ff27b4e5194fdff6d703a4f83.jpg"
  }
];

const ImageSlider = () => {
  const [position, setPosition] = useState(0)

  useEffect(()=>{
    const toggle = setInterval(() => {
      setPosition(position === dataSource.length - 1 ? 0 : position   1);
    }, 3000);

    return () => clearInterval(toggle);
  })
  
  return (
    <View>
      <Slideshow position={position} dataSource={dataSource} />
    </View>
  );
};

const styles = StyleSheet.create({});

export default ImageSlider;

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454503.html

標籤：javascript 反应式

上一篇：無效的鉤子呼叫-ReactNative

下一篇：1單擊后如何禁用按鈕？