TouchableOpacity onPress() 不适用于 react-native-modal [英] TouchableOpacity onPress() not working with react-native-modal

查看:32
本文介绍了TouchableOpacity onPress() 不适用于 react-native-modal的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图让 TouchableOpacity 与 react-native-modal 一起工作.当我按下按钮时,什么也没有发生.

I am trying to get TouchableOpacity working with react-native-modal. When I press the button, nothing happens.

这是我的代码,按下按钮后,没有按下动画,也没有出现警报:

Here is my code, on pressing the button, there is no press animation and no alert appears:

<Modal
  isVisible={this.state.modalVisible}
  onBackdropPress={() => this.setState({ modalVisible: false })}
  deviceWidth={Dimensions.get('window').width}
  deviceHeight={Dimensions.get('window').height}
  backdropColor={'rgba(29, 36, 40, 0.5)'}>
  <View style={styles.modal}>
    <Text style={styles.modalTitle}>Test modal</Text>
    <View style={modalButtons}>
      <TouchableOpacity onPress={() => alert('hello!')}><Text style={styles.modalButton}>Test</Text></TouchableOpacity>
      <TouchableOpacity onPress={() => this.setState({ modalVisible: false })}><Text style={styles.modalButton}>Close</Text></TouchableOpacity>
    </View>
  </View>
</Modal>

我从 react-native 导入 TouchableOpacity,而不是 react-native-gesture-handler(一个解决方案提到了这一点;它对我所做的只是防止按钮不可见).

I am importing TouchableOpacity from react-native, not react-native-gesture-handler (one solution mentioned this; all it did for me was prevent the buttons from being invisible).

我已将范围缩小到按钮周围的视图.当我删除以下样式时,它会起作用:

I've narrowed it down to the View around the buttons. When I remove this the following style, it works:

  modalButtons: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 30,
  },

有没有办法让这个 flex 保持工作?我希望按钮并排显示.

Is there a way to keep this flex working? I would like for the buttons to display side by side.

推荐答案

我遇到了同样的问题.检查您的 TouchableOpacity 是否从 "react-native" 模块导入,而不是从其他任何模块导入.(我的是在 react-native-gesture-handler 中.)

I had the same problem. Check that your TouchableOpacity is imported from the "react-native" module and not from anything else. (Mine was in react-native-gesture-handler.)

这篇关于TouchableOpacity onPress() 不适用于 react-native-modal的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆