react-native-image-slider-box with local images not working

nle07wnf 于 2023-03-31 发布在 React

关注(0)|答案(2)|浏览(105)

我正在尝试使用“react-native-image-slider-box”库创建图像轮播。我正确配置了库类和参数，但无法在移动的博览会应用程序中看到图像轮播。
我使用的代码：

import React, { Component } from 'react';
import { StyleSheet,  View } from 'react-native';
import { SliderBox } from 'react-native-image-slider-box';
import { HomeGrid } from './HomeGrid';

export default class Home extends Component {
    constructor() {
        super();
        this.state = {
        images: [
            require('./commonComponents/photos/photo2.jpeg'),
            require('./commonComponents/photos/photo3.jpg'),
            require('./commonComponents/photos/photo4.jpg'),
            require('./commonComponents/photos/photo3.jpg'),
        ]
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <SliderBox
                    images= { {uri: this.state.images } }
                    sliderBoxHeight={400}
                    onCurrentImagePressed={index =>
                        console.warn(`image ${index} pressed`)
                    }
                />
                <HomeGrid />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
      flex: 1
    }
  });

这些图像存在于这样的目录中：

ProjectName
   ---> src
       ---> components
                ---> commonComponents
                        ---> photos
                                ---> photo1.jpeg

我在哪里出错了？我应该做些什么来使图像滑块工作？输出只显示HomeGrid组件而不是SliderBox组件。

react-native

来源：https://stackoverflow.com/questions/61317673/react-native-image-slider-box-with-local-images-not-working

2条答案

按热度按时间

ep6jt1vc1#

在下面的react-native-image-slider-box示例中，它只是导入像this.state.images这样的图像，而没有uri：

<SliderBox
  images={this.state.images} // like this
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  currentImageEmitter={index => console.warn(`current pos is: ${index}`)}
/>

------更新试用代码----------工作正常-----

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { SliderBox } from "react-native-image-slider-box";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        "https://images1.epochhk.com/pictures/112999/Fotolia_61981708_Subscription_L@1200x1200.jpg",
        "https://i1.read01.com/SIG=3d308k4/304a3259317255786a6f.jpg",
        "https://images1.epochhk.com/pictures/112999/Fotolia_61981708_Subscription_L@1200x1200.jpg",
        "https://i1.read01.com/SIG=3d308k4/304a3259317255786a6f.jpg"
      ]
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <SliderBox
          images={this.state.images}
          sliderBoxHeight={200}
          onCurrentImagePressed={index =>
            console.warn(`image ${index} pressed`)
          }
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

赞(0）回复(0）举报 2023-03-31

lawou6xi2#

不适合我，但你可以检查节点/模块文件夹

赞(0）回复(0）举报 2023-03-31