对反应-本机-快速-旋转不起作用的反应预期。

Question

我正在尝试使用react-本机--快速--旋转木马，但是它的滑动效果并不像预期的那样工作--它通常很难左右滑动，它需要用户更用力地滑动以移动到另一张图片(如下面的链接所示)。

反应式本地旋转木马的滑动问题

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

有人知道解决这个问题的办法吗？

Answer 1

我建议你使用react-native-image-slider.

它灵活易用。https://www.npmjs.com/package/react-native-image-slider i制作了一个名为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>
);
}
}