смахивание на реакцию-родной-оснастка-карусель не работает, как ожидалось - PullRequest
Новая
       10

смахивание на реакцию-родной-оснастка-карусель не работает, как ожидалось

0 голосов
/ 13 февраля 2020

Я пытаюсь использовать response-native-snap-carousel, но, тем не менее, эффект смахивания не работает должным образом - часто трудно провести пальцем влево и вправо, требуется, чтобы пользователь проводил сильнее, чтобы перейти к другому изображению (как см. ссылку ниже).

Проблема смахивания с помощью React Native Snap Carousel

Я не могу найти ни одного документированного солютона, но нашел один возможный проп - swipeThreshold. Я пробую различное значение, но проблема остается.

Кто-нибудь знает решение этой проблемы?

1 Ответ

0 голосов
/ 13 февраля 2020

Я предлагаю вам использовать response-native-image-slider .

, он гибкий и простой в использовании. https://www.npmjs.com/package/react-native-image-slider Я создал компонент с именем slider. js: 

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Image,

} from 'react-native';
import ImageSlider from 'react-native-image-slider';
export default class Slider extends Component {
  render() {
    return (
      <ImageSlider
        loop
        autoPlayWithInterval={3000}
        images={this.props.dataSource}
        customSlide={({ index, item, style, width }) => (
          <View key={index} style={[style, styles.customSlide]}>
            <Image source={{ uri: item }} style={styles.customImage} />
          </View>
        )}
      />
    );
  }
}

const styles = StyleSheet.create({
  customImage: {
    height: 180,
    marginRight: 20,
    marginLeft: 20,
    borderWidth: 1,
    borderRadius: 10,
    marginTop: 8,
  },
  customSlide: {
    backgroundColor: '#eee',
  },
});

, вы можете добавить его в свой проект и использовать там, где вам нужно это: 

import Slider from '../component/slider';
export default class App extends Component {
  constructor(props) {
    super(props);

this.state = {
  images: [
    'https://placeimg.com/640/480/nature',
    'https://placeimg.com/640/480/tech',
    'https://placeimg.com/640/480/animals',
    'https://placeimg.com/640/480/tech',
  ],
}


 render() {
    return (
    <View style={{flex: 1, backgroundColor: '#eee'}}>
                <Slider dataSource={this.state.images} />
              </View>
);
}
}
...