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

【问题标题】：[React-Native-Modal]: onBackButtonPress prop returns nothing[React-Native-Modal]：onBackButtonPress 道具不返回任何内容
【发布时间】：2020-09-11 13:14:32
【问题描述】：

我正在尝试使用 onBackButtonPress 属性自定义我的 Modal。为了检查它是否有效，我将console.log 传递给它，如下所示：

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

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

【问题讨论】：

标签： react-native callback react-native-android console.log react-native-modal

【解决方案1】：

我也使用这个库 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, 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',
    alignItems: 'center'
  },
  closButton: {
    backgroundColor: '#E7E7E7',
    height: 8,
    width: 100,
    marginVertical: 10
  },
  containerImageProfile: {
    marginVertical: 10,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  imageProfile: {
    height: windowHeight / 3.5,
    width: '90%',
    borderRadius: 20
  },
  containerProfile: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  containerTextName: {
    marginHorizontal: responsiveWidth(10),
    justifyContent: 'center'
  },
  textName: {
    fontSize: responsiveFontSize(2.5),
    color: color.fontColor,
    textAlign: 'center'
  },
  textProfesi: {
    fontSize: responsiveFontSize(2.5),
    color: color.fontColor,
    fontWeight: 'bold'
  }
})

export default styles

【讨论】：

【解决方案2】：

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

【讨论】：