反应导航破坏屏幕

Question

>我有一个button tab navigator Profile screen和BarcodeScanner screen，扫描条形码后，我将用户重定向到Profile screen但相机仍在工作，即使场景是Profile screen，它也会继续扫描条形码。

我不知道我该怎么办或如何关闭Camera/barcode scanner我使用Expo barcode Scanner

法典

  import { BarCodeScanner, Permissions } from 'expo';
    <View style={{ flex: 1 }}>
      <BarCodeScanner
        onBarCodeRead={this._handleBarCodeRead}
        style={StyleSheet.absoluteFill}
      />
    </View>
  _handleBarCodeRead = (data) => {
    alert(`Bar code with type ${data.type} and data ${data.data} has been scanned!`);
      this.props.navigation('Profile')     
  }

Answer 1

我发现了一个问题，当我导航时，相机仍然mounted，所以它一直扫描barcode

我用this.props.isFocused来解决我的问题

import { withNavigationFocus } from 'react-navigation'
render() {
    const { isFocused } = this.props
    return (
       <View>
         { isFocused && <RNCamera  ... />  }
       </View
     ) }

export default withNavigationFocus(Camera)

Answer 2

您可以使用堆栈导航器作为根导航器，然后在里面有 2 个屏幕，第一个是选项卡，第二个是条形码扫描仪。每次导航到条形码扫描仪时（通过选项卡导航器屏幕上的用户交互，可能是带有"扫描条形码"的按钮，或类似的东西），条形码屏幕都会像模态一样弹出。然后当你完成后，你只需goBack（）和屏幕关闭/卸载