[React-Native-Modal]：onBackButtonPress道具不返回任何内容

问题描述

我正在尝试使用onBackButtonPress属性自定义我的模态。要检查它是否有效，我像这样向其传递了一个console.log：

<Modal onBackButtonPress={() => console.log('Something')}>
    <NewRidesModal
      //...
    />
</Modal>

但是实际上，每当我按下Android后退按钮时，它甚至都不会返回任何内容。 为什么他道具根本不返回任何值？已弃用吗？

解决方法

我也使用此库react-native-modal并且onBackButtonPress正常工作。 我遇到了另一个问题，就我的情况而言，onBackdropPress无法正常工作，但是在修复样式模式后，一切正常。

这是我的例子， 模态js

import React,{ Component } from 'react'
import { View,Text,Image,TouchableOpacity } from 'react-native'
import styles from '../styles/StyleComponentModalProduct'
import { withNavigation } from 'react-navigation'
import Price from '../../../assets/components/price/Price'
import Modal from 'react-native-modal'
class ComponentModalProduct extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      <Modal
        useNativeDriver={true}
        animationIn={'fadeIn'}
        animationOut={'fadeOut'}
        backdropColor={'rgba(0,0.7)'}
        backdropOpacity={0.5}
        isVisible={this.props.showProduct}
        onSwipeComplete={() => this.props.close()}
        swipeDirection={['down']}
        style={{ justifyContent: 'flex-end',margin: 0 }}
        onBackButtonPress={() => this.props.close()}
        onBackdropPress={() => this.props.close()}>
        <View style={styles.container}>
          <View style={styles.subContainer}>
            <View style={styles.headerContainer}>
              <TouchableOpacity
                onPress={() => this.props.close()}
                style={styles.closButton}
              />
              <View style={styles.containerImageProfile}>
                <Image
                  resizeMode={'contain'}
                  style={styles.imageProfile}
                  source={{ uri: this.props.selectedProduct.foto }}
                />
              </View>
              <View style={styles.containerProfile}>
                <View style={styles.containerTextName}>
                  <Text style={styles.textName}>
                    {this.props.selectedProduct.nama_produk}
                  </Text>
                </View>
                <Price
                  value={this.props.selectedProduct.harga_beli}
                  style={styles.textProfesi}
                />
              </View>
            </View>
          </View>
        </View>
      </Modal>
    )
  }
}

export default withNavigation(ComponentModalProduct)

样式模态js

import { StyleSheet,Dimensions } from 'react-native'
import { color } from '../../../assets/styles/ColorList'
import {
  responsiveHeight,responsiveFontSize,responsiveWidth
} from 'react-native-responsive-dimensions'
const windowHeight = Dimensions.get('window').height
const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-end',alignItems: 'center'
  },subContainer: {
    height: windowHeight / 2,backgroundColor: color.whiteColor,width: '100%',borderTopRightRadius: 20,borderTopLeftRadius: 20,paddingHorizontal: responsiveWidth(5),paddingVertical: responsiveHeight(3)
  },headerContainer: {
    justifyContent: 'center',closButton: {
    backgroundColor: '#E7E7E7',height: 8,width: 100,marginVertical: 10
  },containerImageProfile: {
    marginVertical: 10,justifyContent: 'center',imageProfile: {
    height: windowHeight / 3.5,width: '90%',borderRadius: 20
  },containerProfile: {
    justifyContent: 'center',containerTextName: {
    marginHorizontal: responsiveWidth(10),justifyContent: 'center'
  },textName: {
    fontSize: responsiveFontSize(2.5),color: color.fontColor,textAlign: 'center'
  },textProfesi: {
    fontSize: responsiveFontSize(2.5),fontWeight: 'bold'
  }
})

export default styles

,

我发现onBackButtonPress已被弃用或实际上已被删除。文档中应该对此有更多信息。