TouchableOpacity onPress()无法与react-native-modal一起使用

时间:2019-11-20 18:03:52

标签: react-native

我正在尝试让TouchableOpacity使用react-native-modal模式。当我按下按钮时,什么也没发生。

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

<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而不是react-native-gesture-handler导入TouchableOpacity的(一种解决方案提到了这一点;它对我所做的就是防止按钮不可见)。

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

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

有没有办法让这个flex正常工作?我希望按钮可以并排显示。

1 个答案:

答案 0 :(得分:1)

我有同样的问题。检查您的TouchableOpacity是从"react-native"模块而不是其他任何模块导入的。 (我在react-native-gesture-handler。)