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

您可以使用stacknavigator作为根导航器，然后在内部有2个屏幕，第一个屏幕是选项卡，第二个屏幕是条形码扫描器。每次您导航到条形码扫描仪时（通过Tabnavigator屏幕上的用户交互，可能是带有“ scan Barcode”的按钮或类似的东西），条形码屏幕都应该像模式窗口那样弹出。然后，完成操作后，您只需要goBack（）即可关闭/卸载屏幕

反应导航销毁屏幕

2 个答案: