Question

我试图做到这一点，以便用户在屏幕上的任何位置点击时都应调用我的点击处理程序功能，但到目前为止，所有变体都无法正常工作。

我的代码：

class Story extends Component {
    constructor(props){
        super(props);
        this.state={
            SCREEN_WIDTH : Dimensions.get("window").width,
            SCREEN_HEIGHT : Dimensions.get("window").height,
            bgHorizontalPos : new Animated.Value(10) 
        };

    }

    handleSceneTap(){
        console.log('scenetap called');
        Animated.timing(
            this.state.bgHorizontalPos,
            {
                toValue: 500,
                duration: 2000,
                easing: Easing.linear
            }
        ).start();
    };

    render() {
        let bgStyle = { ...styles.container, transform: [{ translateX: this.state.bgHorizontalPos }] };
        return (
            <TouchableWithoutFeedback onPress={ ()=>this.handleSceneTap() }>
                <View style={{position:'relative'}}>
                    <Animated.Image source={require('lingo/assets/images/campus.png')} style={bgStyle}></Animated.Image>
                    <Image source={{ uri:'https://place-hold.it/150x200/fdd.png'}} style={styles.character1}></Image>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

但是，如果我直接触发类似的功能

<TouchableWithoutFeedback onPress={ this.handleSceneTap() }>

然后它会在场景加载后立即触发。

Answer 1

您的代码确实可以正常工作。

问题是view占用的空间不足。如果要将视图扩展到整个屏幕，可以添加flex:1

<View style={{position:'relative', flex:1}}>

I cloned the project from this page

onPress在TouchableWithoutFeedback上不起作用

1 个答案: