Question

我目前正面临挑战similar to this，但是该解决方案对我而言不起作用。

我有一个模态，正在其上创建一个按钮以关闭模态。这是一个功能组件，可在modalClosed中获取功能。

<TouchableNativeFeedback onPress={props.modalClosed}>
       <View style={{ backgroundColor: '#5d5d5d', padding: 10 }}>
             <Text style={[globalStyles.text, { textAlign: 'center' }]}>Close!</Text>
       </View>
</TouchableNativeFeedback>

由于某种原因，这没有执行onPress事件。

但是，如果我将其替换为下面的代码，它将起作用。

<Button title="Close" onPress={props.modalClosed} color='#5d5d5d' />

使用TouchableNativeFeedback的类似实现可在另一个屏幕（非模式）上运行。有人可以解释一下是否做错了吗？

示例链接

https://snack.expo.io/HylsYzoIS

Answer 1

我有一个类似的问题，这就是我的解决方案。错误-请勿像这样导入：从'react-native-gesture-handler'导入{TouchableNativeFeedback};

解决方案：我从'react-native'导入了TouchableNativeFeedback，如下所示：从'react-native'导入{TouchableNativeFeedback};

我认为从“ react-native-gesture-handler”导入时，TouchableOpacity和TouchableNativeFeedback不会在Modal组件中触发onPress，只有Button起作用。

希望这会有所帮助

Answer 2

我不确定您如何在代码中使用状态，但是我相信您可以尝试设置以下状态


    constructor(props) {
        super(props);
        this.state = {
            modalOpen: false
        };
    }

    closeModal = () => {
        this.setState({ modalOpen: false });
    }

    <TouchableNativeFeedback onPress={this.modalClosed} />

或者，您是否尝试使用模式组件？我怀疑它是否可以与TouchableNativeFeedback包装器一起使用

    <Modal 
          animationType="slide"
          transparent={true}
          visible={true}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }} >

希望有帮助！

TouchableNativeFeedback onPress不起作用

2 个答案: