Question

我在世博会上创建了一种演示：https://snack.expo.io/@noitsnack/onpressin-twice

我通过在世博会上扫描二维码来测试这个。这可能是一个世博会的错误。

我在<Image>中包含了世博会符号（<TouchableWithoutFeedback>）。在这里，我们看到当我们按下世博会符号时，它会使分数增加1，然后符号移动到新位置。有时会导致onPressIn触发两次。我不明白这一点，为什么会这样？

以下是世博会的代码：

import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback, Image, Dimensions } from 'react-native';

import IMAGE_EXPO from './assets/expo.symbol.white.png'

const IMAGE_SIZE = 100;

export default class App extends Component {
    state = {
        score: 0,
        ...getRandXY()
    }
    render() {
        const { score, x, y } = this.state;
        return (
            <View style={{flex:1, backgroundColor:'steelblue' }}>
                <Text style={{fontSize:72, textAlign:'center'}}>{score}</Text>
                <TouchableWithoutFeedback onPressIn={this.addScore}>
                    <Image source={IMAGE_EXPO} style={{ width:IMAGE_SIZE, height:IMAGE_SIZE, left:x, top:y, position:'absolute' }} />
                </TouchableWithoutFeedback>
            </View>
        )
    }

    addScore = e => {
        this.setState(({ score }) => ({ score:score+1, ...getRandXY() }));
    }
}

function getRandXY() {
    return {
        x: getRandInt(0, Dimensions.get('window').width - IMAGE_SIZE),
        y: getRandInt(0, Dimensions.get('window').height - IMAGE_SIZE)
    }
}

function getRandInt(min, max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

如果视图移动，则onPressIn被调用两次

0 个答案: