React native 反应本机导航:重新加载选项卡和侧抽屉时未触发深链接事件
问题描述 我创建了一个简单的应用程序,您可以在其中登录,然后在几个选项卡上加载一个侧面抽屉 侧抽屉有按钮,允许您使用深度链接导航到其他页面 我第一次登录应用程序时,按钮和深度链接工作正常。但当我注销并再次登录(登录会重新加载选项卡和侧抽屉)时,侧抽屉按钮都不起作用。在我的深度链接处理程序中,我输出了一条控制台消息,我意识到深度链接事件并不是第二次触发的,这显然是问题所在 我不知道为什么会发生这种情况,我怀疑这是一个bug。但如果不是这样,我希望别人指出我的代码哪里出了问题,我应该怎么做 我在下面附上代码片段 代码片段 sidedrawer.jsReact native 反应本机导航:重新加载选项卡和侧抽屉时未触发深链接事件,react-native,deep-linking,react-native-navigation,deeplink,wix-react-native-navigation,React Native,Deep Linking,React Native Navigation,Deeplink,Wix React Native Navigation,问题描述 我创建了一个简单的应用程序,您可以在其中登录,然后在几个选项卡上加载一个侧面抽屉 侧抽屉有按钮,允许您使用深度链接导航到其他页面 我第一次登录应用程序时,按钮和深度链接工作正常。但当我注销并再次登录(登录会重新加载选项卡和侧抽屉)时,侧抽屉按钮都不起作用。在我的深度链接处理程序中,我输出了一条控制台消息,我意识到深度链接事件并不是第二次触发的,这显然是问题所在 我不知道为什么会发生这种情况,我怀疑这是一个bug。但如果不是这样,我希望别人指出我的代码哪里出了问题,我应该怎么做 我在下面
import React, {Component} from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import {Navigation} from 'react-native-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class SidedrawerComponent extends Component {
constructor(props){
super(props);
}
render(){
return(
<View style={styles.sideMenuStyle}>
<View style={{height: '20%', borderColor: 'black', borderWidth : 1, backgroundColor : 'white'}}>
</View>
<TouchableOpacity onPress={this.goToScreen.bind(this, 'consumerSettings')}>
<View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
<Icon name="home" size={30} color="black" />
<Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>Settings</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.goToScreen.bind(this, 'aboutUs')}>
<View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
<Icon name="home" size={30} color="black" />
<Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>About Us</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.goToScreen.bind(this, 'termsAndConditions')}>
<View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
<Icon name="home" size={30} color="black" />
<Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>Terms and Conditions</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.goToScreen.bind(this, 'inbox')}>
<View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
<Icon name="home" size={30} color="black" />
<Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>Inbox</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.goToScreen.bind(this, 'logout')}>
<View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
<Icon name="home" size={30} color="black" />
<Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>Logout</Text>
</View>
</TouchableOpacity>
</View>
)
}
goToScreen = (screen) => {
const visibleScreenInstanceId = Navigation.getCurrentlyVisibleScreenId();
visibleScreenInstanceId.then((result)=>{
this.props.navigator.handleDeepLink({
link: screen,
payload: result.screenId // (optional) Extra payload with deep link
});
})
}
}
const styles = StyleSheet.create({
sideMenuStyle : {
backgroundColor : 'white',
height : '100%'
}
})
环境
React本机导航版本:1.1.476
React本机版本:0.55.2
平台:安卓
设备信息:Galaxy Nexus Simulator,Oreo(API 27),Debug我解决了问题-触发了深层链接事件,但问题是
结果的值。每次重新加载选项卡时,每个屏幕的screenId都会发生变化
因此,在我的deeplink处理程序中,我没有静态检查特定ID,而是检查event.payload是否为==this.props.navigator.screenInstanceID
,这两个变量当然会匹配,即使ID发生变化,这才是最重要的
希望这对尝试使用React本机导航创建基于侧抽屉选项卡的应用程序的其他人有用
navigatorEvent = event => {
if(event.type==="NavBarButtonPress" && event.id === "DrawerButton"){
this.props.navigator.toggleDrawer({
side : 'left',
animated : true
})
}
if(event.type == 'DeepLink') {
if(event.link=="aboutUs" && event.payload=='screenInstanceID5'){
this.props.navigator.push({
screen : 'ServiceTracker.AboutUsScreenComponent',
title : 'About Us'
})
this.props.navigator.toggleDrawer({
side : 'left',
animated : true
})
}
if(event.link=="termsAndConditions" && event.payload=='screenInstanceID5'){
this.props.navigator.push({
screen : 'ServiceTracker.TermsAndConditionsScreenComponent',
title : 'Terms and Conditions'
})
this.props.navigator.toggleDrawer({
side : 'left',
animated : true
})
}
if(event.link=="profile" && event.payload=='screenInstanceID5'){
this.props.navigator.push({
screen : 'ServiceTracker.ServiceProviderProfileScreenComponent',
title : 'Profile'
})
this.props.navigator.toggleDrawer({
side : 'left',
animated : true
})
}
if(event.link=="serviceProviderSettings" && event.payload=='screenInstanceID5'){
this.props.navigator.push({
screen : 'ServiceTracker.ServiceProviderSettingsScreenComponent',
title : 'Settings'
})
this.props.navigator.toggleDrawer({
side : 'left',
animated : true
})
}
/*if(event.link=="dashboard" && event.payload=='screenInstanceID5'){
LoadTabs();
this.props.navigator.toggleDrawer({
side : 'left',
animated : true
})
}*/
if(event.link=="inbox" && event.payload=='screenInstanceID5'){
this.props.navigator.push({
screen : 'ServiceTracker.InboxScreenComponent',
title : 'Inbox'
})
this.props.navigator.toggleDrawer({
side : 'left',
animated : true
})
}
if(event.link=="logout" && event.payload=='screenInstanceID5'){
this.props.navigator.toggleDrawer({
side : 'left',
animated : true
})
Navigation.startSingleScreenApp({
screen : {
screen : "ServiceTracker.LandingScreenComponent",
title : "Landing Screen",
navigatorStyle : {
navBarHidden : true
}
}
})
}
}
}