反应长按时更改的本机图像预览

Question

我有一系列图像，我必须确保当用户在图像上长按时，仍然保持用户对图像的触摸，然后在一定时间间隔内所看到的图像必须改变每个小孩时间。

当用户从图像上释放触摸时，图像序列必须结束并且唯一可见的图像是初始图像。

您可以在gif中看到，这是我得到的结果，但是我对结果不完全满意。

在发布和触摸图像之间似乎给了我一些问题。

链接：Expo

代码：

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  ImageBackground,
  TouchableHighlight,
  TouchableWithoutFeedback,
} from 'react-native';
import { Constants } from 'expo';

let url = [
  'https://cmsimages-alt.kbb.com/content/dam/kbb-editorial/make/honda/insight/2019/oem/01-2019-honda-insight-oem.jpg',
  'https://pmcvariety.files.wordpress.com/2016/08/jennifer-lawrence.jpg?w=1000&h=563&crop=1',
  'https://pmcwwd.files.wordpress.com/2017/01/emma-stone.jpg?w=640&h=415&crop=1',
  'https://media2.s-nbcnews.com/j/newscms/2018_32/2522881/180807-ruby-rose-se-203p_84ba510721b6d71d8983f423877f3628.fit-760w.jpg',
  'http://static-36.sinclairstoryline.com/resources/media/bdcf4429-cc63-477f-a6a8-03ff26e4bf18-large16x9_wenn30876450.jpg?1534450226316',
];

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      idImg: 0,
      change: false,
    };
  }

  _onPressIn = () => {
    this.setState({ change: true }, () => {
      setInterval(() => {
        let { change, idImg } = this.state;
        console.log('Reap', idImg);
        if (change) this.setState({ idImg: ++idImg % url.length });
      }, 3000);
    });
  };

  _onPressOut = () => {
    console.log('Out');
    this.setState({ idImg: 0, change: false });
  };

  render() {
    let { idImg } = this.state;
    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback
          //onPress={this._onPressButton}
          onPressIn={this._onPressIn}
          onPressOut={this._onPressOut}>
          <ImageBackground
            style={[styles.itemContainer, {}]}
            imageStyle={{ borderRadius: 4 }}
            source={{ uri: url[idImg] }}>
            <Text style={styles.itemName}>Id: {idImg}</Text>
          </ImageBackground>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  itemContainer: {
    borderRadius: 4,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
  },
  itemName: {
    fontSize: 10,
    color: '#fff',
    fontWeight: '600',
  },
});