如何在React Navigation中以编程方式删除抽屉项目？

问题描述

问题：我正在使用React Native，React Navigation和Expo in-app购买。我抽屉中的第一项是通过应用内购买“解锁应用”。我想让用户在成功购买应用程序后导航回到主屏幕。当用户导航回首页时，我希望抽屉反映出“解锁应用程序”选项卡不再存在，因为已经购买了该应用程序。我仍然对React Navigation还是陌生的，如果这很简单，很抱歉。

我尝试过的事情：我已经完成了此处https://aboutreact.com/how-to-hide-navigation-drawer-sidebar-option/所要求的操作，这也是很多类似StackOverflow问题所建议的。如果我想从一开始就隐藏一个选项卡，例如在用户购买后关闭并重新打开该应用程序之后，该标签就很好了，但是当用户购买该应用程序后对我没有直接帮助。

代码：

App.js

import React,{ Component } from 'react';
import { SafeAreaView, TouchableOpacity, Platform} from 'react-native';
import { Feather, AntDesign, Entypo, MaterialIcons } from '@expo/vector-icons';
import * as InAppPurchases from 'expo-in-app-purchases';
import AsyncStorage from '@react-native-community/async-storage';
import { isAppPurchased } from './screens/UnlockAppFromStoreScreen';

import { createAppContainer } from 'react-navigation';import { createDrawerNavigator } from 'react-navigation-drawer';

import Strings from './constants/strings';
import Colors from './constants/Colors';

//Skipping all the screen imports
.
.
.

var isPurchased = false;

class DrawerNavigation extends Component {  

componentDidMount(){    
  if(!isPurchased){      
   isPurchased = isAppPurchased();   
  }  
}  

toggleDrawer = () => {    //Toggle the side drawer open and closed 
  this.props.navigationProps.toggleDrawer(); 
}; 

 render() {    
   return (      
     <SafeAreaView        
      style={{ flexDirection: 'row' }}>        
      <TouchableOpacity         
       onPress={this.toggleDrawer.bind(this)}        
       accessibilityRole="button"         
       accessibilityLabel={Strings.drawerMenuButtonDescription}>         
         <Feather name="menu" size={25} color="white" style={{marginLeft: 5}} />  
      </TouchableOpacity> 
</SafeAreaView>    );  }}


class Hidden extends Component {    
   render(){      
     return null;    
}}


var unlockDrawerLabel = !isPurchased? Strings.unLockAppLabel: <Hidden />;
var unlockDrawerIcon = !isPurchased? <AntDesign name="unlock" size={24} color="black" accessibilityLabel={Strings.unlockIconDescription} />: <Hidden />

const DrawerNavigator = createDrawerNavigator({    
   Unlock: {    
       screen: UnlockAppScreenNavigator,    
       navigationoptions: {      
          drawerLabel: unlockDrawerLabel,      
          drawerIcon: unlockDrawerIcon    
       }  
   },  
   Home: {    
       screen: MainScreenNavigator,    
       navigationoptions: {      
          drawerLabel: Strings.homeLabel,      
          drawerIcon: <Entypo name="home" size={24} color="black" accessibilityLabel={Strings.homeImageDescription}/>    
       }  
   },  
   Help: {    
      screen: HelpScreenNavigator,    
      navigationoptions: {      
         drawerLabel: Strings.helpLabel,      
         drawerIcon: <Entypo name="help-with-circle" size={24} color="black" accessibilityLabel={Strings.helpImageDescription}/>    
     }  
   },  
   About: {    
      screen: AboutScreenNavigator,    
      navigationoptions: {      
         drawerLabel: Strings.aboutLabel    
      }  
   },  
   SendFeedback: {    
      screen: SendFeedbackNavigator,    
      navigationoptions: {      
         drawerLabel: Strings.sendFeedback,      
         drawerIcon: <MaterialIcons name="Feedback" size={24} color="black" accessibilityLabel={Strings.FeedbackImageDescription}/>    
      }  
   }},  
{    initialRouteName: 'Home'  });



InAppPurchases.setPurchaseListener(
({responseCode, results, errorCode}) => { 
     console.log("Purchase Listener: ");  
     if(responseCode === InAppPurchases.IAPResponseCode.OK){      
          results.forEach( purchase => {        
             if(!purchase.ackNowledged){            
                  console.log(`Successfully purchased ${purchase.productID}`);            
                  //Unlock the app here...            
                  AsyncStorage.setItem(Strings.appPurchaseStorageItem,'true');            
                  InAppPurchases.finishTransactionAsync(purchase, false);
                  
                  unlockDrawerIcon = <Hidden />;            
                  unlockDrawerLabel = <Hidden />;        
             }      
          });  
     }  
     else{      
       console.log(`Something went wrong: Error Code ${errorCode}`);  
     }
});

export default createAppContainer(DrawerNavigator);

isAppPurchased功能：

export async function isAppPurchased(){
   var storedData = await AsyncStorage.getItem(Strings.appPurchaseStorageItem);
   var isPurchased = false;

   if(storedData !== null){
        isPurchased = storedData === 'true';
   }
   else{
        var purchaseHistory = await InAppPurchase.connectAsync();
        
        purchaseHistory.forEach( result => {
             isPurchased = result.ackNowledged;
        });
   }

   return isPurchased;
}

任何建议将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）