Как я могу добавить событие на нажатие панели вкладок в реагировать родной?

Question

У меня есть собственное приложение реагирования, в котором я использую реагирующую навигацию v3. Я хочу создать событие при нажатии на определенную панель вкладок. На моей домашней вкладке у меня есть сканер штрих-кода. Когда пользователь сканирует, приложение перенаправляет на другую вкладку с данными штрих-кода, устанавливая данные в асинхронное хранилище. Но при повторной попытке сканирования оно становится пустым.

Итак, я хочу создать событие, по которому я смогу очистить асинхронное хранилище, когда пользователь перейдет на домашнюю вкладку для повторного сканирования. Как добавить это событие на панель вкладок?

Answer 1

Попробуйте код ниже, это поможет вам,

import {NavigationEvents} from "react-navigation";


<NavigationEvents
      onWillFocus={payload => console.log('will focus',payload)}
      onDidFocus={payload => console.log('did focus',payload)}
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />

NavigationEvents компонент, который вы можете добавить в свой метод рендеринга страницы, где вы хотите отслеживать события пользователей, и обрабатывать, как AsyncStorage и любые действия, которые вы хотите.

Добавьте только одно событие, если вам не нужны все

Для более подробной информации вы можете посетить здесь

Спасибо

Answer 2

Вы можете прослушивать события жизненного цикла событий.

Настройка довольно проста. Вот пример того, как настроить его на вашем экране.

import React, {Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';

export default class Screen2 extends React.Component {

  // willFocus - the screen will focus
  // didFocus - the screen focused (if there was a transition, the transition completed)
  // willBlur - the screen will be unfocused
  // didBlur - the screen unfocused (if there was a transition, the transition completed)
  componentDidMount () {
    // add listener 
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocusAction);
    this.didFocusSubscription = this.props.navigation.addListener('didFocus', this.didFocusAction);
    this.willBlurSubscription = this.props.navigation.addListener('willBlur', this.willBlurAction);
    this.didBlurSubscription = this.props.navigation.addListener('didBlur', this.didBlurAction);
  }

  componentWillUmount () {
    // remove listener
    this.willFocusSubscription.remove()
    this.didFocusSubscription.remove();
    this.willBlurSubscription.remove();
    this.didBlurSubscription.remove();
  }

  willBlurAction = () => {
    console.log('willBlur Screen', new Date().getTime())
  }

  didBlurAction = () => {
    console.log('didBlur Screen', new Date().getTime());
  }

  didFocusAction = () => {
    console.log('didFocus Screen', new Date().getTime());
  }

  willFocusAction = () => {
    console.log('willFocus Screen', new Date().getTime());
  }


  render() {
    return (
      <View style={styles.container}>
      <Text>Screen</Text>
      </View>
    )
  }
}

Вам не нужно добавлять всех слушателей, только тех, которые вам нужны. Скорее всего, вы захотите очистить свое значение от AsyncStorage внутри события willFocus. Таким образом, это происходит до того, как экран сфокусировался.