Реагировать навигация уничтожить экран

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

Вы можете использовать стекавигатор в качестве корневого навигатора, тогда внутри есть 2 экрана: первый - вкладки, а второй - сканер штрих-кода. Каждый раз, когда вы переходите к сканеру штрих-кода (через взаимодействие с пользователем на экране tabnavigator, может быть, кнопка с «сканировать штрих-код» или что-то в этом роде), экран штрих-кода должен всплывать как модальный. Затем, когда вы закончите, вы просто goBack () и экран закрывается / размонтируется

Answer 2

Я выяснил проблему, когда при навигации камера все еще mounted, поэтому она продолжает сканировать barcode

Я использовал this.props.isFocused, чтобы исправить мою проблему

import { withNavigationFocus } from 'react-navigation'

render() {
    const { isFocused } = this.props
    return (
       <View>
         { isFocused && <RNCamera  ... />  }
       </View
     ) }


export default withNavigationFocus(Camera)