在模态的子组件

Question

我无法在放置在模式中的组件中使用react-native BackHandler 设置事件侦听器。我怀疑这是因为模态正在侦听 onRequestClose 道具上传递的方法。

好吧，我不确定这是一个错误还是一个功能请求，但我建议您允许我们将某个值（例如null）传递给 onRequestClose 道具作为一种方式标记可能在Modal的子组件中设置了BackHandler事件侦听器，并且这些侦听器具有优先级（即覆盖模态的 onRequestClose ）。

环境

环境：

• OS：macOS High Sierra 10.13.3
• 节点：9.2.0
• 纱线：0.24.6
• npm：5.6.0
• 守望者：4.7.0
• Xcode：Xcode 9.2 Build版本9C40b
• Android Studio：3.0 AI-171.4408382

包:(想要=＆gt;已安装）

• 反应：16.2.0 =＆gt; 16.2.0

• react-native：0.53.0

  =＆GT; 0.53.0

重现步骤

下面是子组件内的说明：

class ChildComponent extends Component {
    componentDidMount () {
        BackHandler.addEventListener('hardwareBackPress', this._onBackPress)
    }

    componentWillUnmount () {
        BackHandler.removeEventListener('hardwareBackPress', this._onBackPress)
    }

    _onBackPress = () => {
        console.log('Event was triggered')

        return true
    }

    render () {
        return (
            <Text>{'Some Text'}</Text>
        )
    }
}

export default ChildComponent

具有模态（父级）的组件具有以下说明：

class ParentComponentWithModal extends Component {
    constructor (props) {
        super(props)
        this.state = {
            modalVisible: true
        }
    }

    render () {
        const { modalVisible } = this.state
        return (
            <View>
                <Modal
                    visible={modalVisible}
                    onRequestClose={() => console.log('onRequestClose')}
            >
                <ChildComponent />
            </Modal>
          </View>
        )
    }
}

export default ParentComponentWithModal

预期行为

当按下后退按钮时，应该执行添加到hardwareBackPressed侦听器的 _onBackPress 方法。

实际行为

按下后退按钮时，会触发 onRequestClose 道具上定义的功能。即使 onRequestClose 道具上没有定义任何函数，也不会执行附加到模态子项中定义的事件侦听器的方法。

Answer 1

我迟到了，但发帖只是为了帮助别人。

此行为记录在React Native's site上：

onRequestClose
The onRequestClose callback is called when the user taps the hardware back button on
Android or the menu button on Apple TV. Because of this required prop, be aware that
BackHandler events will not be emitted as long as the modal is open.

因此，您需要使用 onRequestClose 函数而不是BackHandler。