React Native Navigation: события глубинных ссылок не запускаются при перезагрузке вкладок и бокового ящика

Описание проблемы

Я создал простое приложение, в котором вы входите в систему, а затем загружаются несколько вкладок с боковым ящиком.

В боковом ящике есть кнопки, позволяющие переходить на другие страницы с помощью глубоких ссылок.

При первом входе в приложение кнопки и ссылки на контент работают нормально. Но когда я выхожу из системы и снова вхожу в систему (вход в систему перезагружает вкладки и боковой ящик), ни одна из кнопок бокового ящика не работает. В моих обработчиках глубинных ссылок я вывел консольное сообщение и понял, что события глубинных ссылок не запускались во второй раз, что явно является проблемой.

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

Прилагаю ниже фрагменты кода.

Фрагменты кода

sidedrawer.js

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%'
    }
})

обработчики ссылок на контент на одной из вкладок:

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
              }
             }
           })
          }
      }
    }

Окружающая среда

Версия React Native Navigation: 1.1.476 Версия React Native: 0.55.2 Платформы: Android Информация об устройстве: Galaxy Nexus Simulator, Oreo (API 27), отладка


person sidharth ramanan    schedule 21.07.2018    source источник


Ответы (1)


Я выяснил проблему - события глубинных ссылок были запускались, но проблема заключалась в том, что значение result.screenId изменяется для каждого экрана каждый раз при перезагрузке вкладок.

Итак, в моих обработчиках deeplink, вместо статической проверки определенного идентификатора, я проверил, совпадают ли event.payload was == this.props.navigator.screenInstanceID, обе переменные, которые, конечно, будут совпадать, даже если изменится идентификатор, и это все, что имеет значение.

Надеюсь, это будет полезно для других, пытающихся использовать React Native Navigation для создания приложения на основе вкладок с боковым ящиком.

person sidharth ramanan    schedule 23.07.2018