首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在react native中按下tab栏添加事件?

如何在react native中按下tab栏添加事件?
EN

Stack Overflow用户
提问于 2019-03-06 19:57:52
回答 2查看 1K关注 0票数 1

我有一个react原生应用程序,其中我使用了react导航v3。我想在按下特定的选项卡栏时创建一个事件。在我的主页标签栏上,我有一个条形码扫描仪。当用户扫描时,应用程序指向不同的标签与条形码数据设置数据为async storage.But当我再次尝试扫描时,它变为空白。

因此,我想创建一个事件,当用户转到主页选项卡再次扫描时,我可以在该事件上清除异步存储。如何在主页选项卡栏上添加事件?

EN

回答 2

Stack Overflow用户

发布于 2019-03-06 20:06:55

试试下面的代码,它会对你有帮助,

代码语言:javascript
运行
复制
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)}
    />

您可以在页面的render方法中添加NavigationEvents组件,以便跟踪用户的事件,并像AsyncStorage一样处理任何您想要的操作。

如果不需要所有事件,则仅添加一个事件

有关更多详细信息,请访问here

谢谢

票数 1
EN

Stack Overflow用户

发布于 2019-03-06 20:07:11

您可以监听navigation lifecycle事件。

它的设置相当简单。下面是一个如何在屏幕上设置它的示例。

代码语言:javascript
运行
复制
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>
    )
  }
}

你不需要添加所有的监听器,只需要添加你需要的监听器。您很可能希望在willFocus事件内从AsyncStorage中清除您的值。这样,它就会在屏幕聚焦之前发生。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55022606

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档