我有一个react原生应用程序,其中我使用了react导航v3。我想在按下特定的选项卡栏时创建一个事件。在我的主页标签栏上,我有一个条形码扫描仪。当用户扫描时,应用程序指向不同的标签与条形码数据设置数据为async storage.But当我再次尝试扫描时,它变为空白。
因此,我想创建一个事件,当用户转到主页选项卡再次扫描时,我可以在该事件上清除异步存储。如何在主页选项卡栏上添加事件?
发布于 2019-03-06 20:06:55
试试下面的代码,它会对你有帮助,
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
谢谢
发布于 2019-03-06 20:07:11
您可以监听navigation lifecycle事件。
它的设置相当简单。下面是一个如何在屏幕上设置它的示例。
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中清除您的值。这样,它就会在屏幕聚焦之前发生。
https://stackoverflow.com/questions/55022606
复制相似问题