react-native - react-native-image-slider-box 与本地图像不起作用

Question

我正在尝试使用“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-nativereact-native-image

Answer 1

在下面的react-native-image-slider-box示例中，它只是像this.state.imageswithout一样导入图像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/[e-mail]",
        "https://i1.read01.com/SIG=3d308k4/304a3259317255786a6f.jpg",
        "https://images1.epochhk.com/pictures/112999/[e-mail]",
        "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
  }
});