[React-Native-Modal]：onBackButtonPress属性不返回任何内容

Question

我正试着用onBackButtonPress属性来自定义我的模式。为了检查它是否工作，我向它传递了一个console.log，如下所示：

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

但事实上，当我按下Android的后退按钮时，它甚至不会返回任何东西。为什么他的prop根本不返回任何值？它被弃用了吗？

Answer 1

我也使用了这个库的react-native-modal，onBackButtonPress工作得很好。我面临着另一个问题，在我的情况下，onBackdropPress不工作，但在我修复我的样式模式后，一切都正常工作。

这是我的示例，Modal 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)

设置Modal 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

Answer 2

我发现onBackButtonPress已被弃用，或者它实际上已被删除。在文档中应该有更多关于这方面的信息。