Question

我是本机新手，我正在尝试实现一个图像滑块，该滑块显示从API提取的图像。我尝试了几种解决方案，但无济于事。这是代码，当前可用于静态图像，但是我需要一种解决方案来显示来自API的图像。

这是代码

// Carousel.js
import * as React from "react";
import { StyleSheet, View, ScrollView, Dimensions, Image } from "react-native";

const DEVICE_WIDTH = Dimensions.get("window").width;


class Carousel extends React.Component {
  scrollRef = React.createRef();
  constructor(props) {
    super(props);

    this.state = {
      selectedIndex: 0,
      // images: null
    };
    this.scrollRef = React.createRef();
  }

  componentDidMount = () => {
    setInterval(() => {
      this.setState(
        prev => ({
          selectedIndex:
            prev.selectedIndex === this.props.images.length - 1
              ? 0
              : prev.selectedIndex + 1
        }),
        () => {
          this.scrollRef.current.scrollTo({
            animated: true,
            x: DEVICE_WIDTH * this.state.selectedIndex,
            y: 0
          });
        }
      );
    }, 3000);
  };

  componentWillUnmount(){
    clearInterval()
  }

  setSelectedIndex = event => {
    const contentOffset = event.nativeEvent.contentOffset;
    const viewSize = event.nativeEvent.layoutMeasurement;

    // Divide the horizontal offset by the width of the view to see which page is visible
    const selectedIndex = Math.floor(contentOffset.x / viewSize.width);
    this.setState({ selectedIndex });
  };

  render() {
    const { images } = this.props;
    const { selectedIndex  } = this.state;
    return (
      <View style={{ height: "100%", width: "100%" }}>
        <ScrollView
          horizontal
          pagingEnabled
          onMomentumScrollEnd={this.setSelectedIndex}
          ref={this.scrollRef}
        >
          {images.map(image => (
            <Image
              style={styles.backgroundImage}
              source={{ uri: image }}
              key={image}
            />
          ))}
        </ScrollView>
        <View style={styles.circleDiv}>
          {images.map((image, i) => (
            <View
              style={[
                styles.whiteCircle,
                { opacity: i === selectedIndex ? 0.5 : 1 }
              ]}
              key={image}
              active={i === selectedIndex}
            />
          ))}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backgroundImage: {
    height: "100%",
    width: Dimensions.get("window").width
  },
  }
);

export { Carousel };

// App.js
import React, { useEffect, useState } from 'react'
import { Platform, StyleSheet, Text, View } from "react-native";
import { Carousel } from "./Carousel";

const images = [
  "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
  "https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80",
  "https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
  "https://images.unsplash.com/photo-1429087969512-1e85aab2683d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
  "https://images.unsplash.com/photo-1505678261036-a3fcc5e884ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
];

const App = () => {

//   const APP_KEY = "*****";

//   const [images, setImages] = useState([]);

//   useEffect( () => {
//     getData();
//   }, []);

//   const getData = async () => {
//     const response = await fetch(`API URL*********&apiKey=${APP_KEY}`);
//     const data = await response.json();
//     setImages(data.articles.urlToImage);
// }

    return (
      <View style={styles.container}>
        <Carousel images={images} />
      </View>
    );
  }

  export default App

在App.js文件中，我注释了我如何实现这一目标。

请协助。

Answer 1

var { height, width } = Dimensions.get("window");
const DEVICE_HEIGHT: height,
const DEVICE_WIDTH: width,


//Call the API and store the data in state let's say imageData and use that staet to render the images.
     <ImageCarousel
            ref={c => {
              this._carousel = c;
            }}
            data={this.state.imageData} //This is the data of your API
            parallaxFactor={2}
            activeSlideAlignment="center"
            renderItem={({ item, index }) =>
              this._renderItem({ item, index, showDescLockedImage })
            }
            sliderWidth={CONST.DEVICE_WIDTH / 1}
            sliderHeight={CONST.DEVICE_HEIGHT / 1.5}
            activeAnimationType="spring"
            itemHeight={CONST.DEVICE_HEIGHT / 1.5}
            itemWidth={CONST.DEVICE_WIDTH / 1.8}
            layout={"default"}
            slideStyle={{
              alignContent: "center",
              justifyContent: "center",
              elevation: 5
            }}
            onSnapToItem={this.changeIndex}
          />

Answer 2

我正在回答自己的问题。问题是我没有像这样正确定位来自API的图像：来源= {{uri：image.urlToImage}} 这是最终代码： Carousel.js

    const { images } = this.props;
    const { selectedIndex  } = this.state;
    console.warn(images)
    return (
      <View style={{ height: "100%", width: "100%" }}>
        <ScrollView
          horizontal
          pagingEnabled
          onMomentumScrollEnd={this.setSelectedIndex}
          ref={this.scrollRef}
        >
          {images.map(image => (
            <Image
              style={styles.backgroundImage}
              source={{ uri: image.urlToImage }}
              key={image}
            />
          ))}
        </ScrollView>
        <View style={styles.circleDiv}>
          {images.map((image, i) => (
            <View
              style={[
                styles.whiteCircle,
                { opacity: i === selectedIndex ? 0.5 : 1 }
              ]}
              key={image}
              active={i === selectedIndex}
            />
          ))}
        </View>
      </View>
    );
  }

App.js

import React, { useEffect, useState } from 'react'
import { Platform, StyleSheet, Text, View, Image } from "react-native";
import { Carousel } from "./Carousel";


const App = () => {
const APP_KEY = "********";

const [images, setImages] = useState([]);


 useEffect( () => {
 getData();
  }, []);

  const getData = async () => {
    const response = await fetch(`API URL*******&apiKey=${APP_KEY}`);
    const data = await response.json();
    setImages(data);
}


    return (
      <View style={styles.container}>
            <Carousel images={images}/>          
      </View>
    );
  }

export default App

无法在React Native

2 个答案: