react-native - 在 react-native-snap-carousel 上滑动未按预期工作

Question

我正在尝试使用 react-native-snap-carousel 但是，滑动效果没有按预期工作 - 通常很难左右滑动，它需要用户更加努力地滑动才能移动到另一张图片（如图所示下方链接）。

React Native Snap Carousel 的滑动问题

我找不到任何记录在案的解决方案，但我找到了一种可能的道具 - swipeThreshold。我尝试了各种价值，但问题仍然存在。

有谁知道这个问题的解决方案？

标签： react-nativereact-native-snap-carousel

Answer 1

我建议你使用react-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>
);
}
}