Коробка реагирования-родного-изображения-слайдера с локальными изображениями не работает - PullRequest
Новая
       17

Коробка реагирования-родного-изображения-слайдера с локальными изображениями не работает

0 голосов
/ 20 апреля 2020

Я пытаюсь создать карусель изображений, используя библиотеку «act-native-image-slider-box ». Я правильно настроил классы и параметры библиотеки, но не вижу карусели изображений в мобильном приложении expo.

Код, который я использовал: 

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.

1 Ответ

0 голосов
/ 20 апреля 2020

В примере response-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
  }
});
...