Javascript 导航选项-TabBarVisible和TabBarIcon-未定义不是对象

经过大量研究，我找到了埃米在一些屏幕上隐藏选项卡栏的解决方案。 然而，我面临两个问题

一方面，Emmie的解决方案在第一次渲染应用程序时效果很好，但是如果我后来“再次保存”了.js，它就会崩溃，显示错误“undefined不是一个对象（计算“\u this.\u getAbbarVisibility”）

其次，这听起来很愚蠢（我是编程新手），但我不知道如何同时使用tabBarIcon功能。目前，该应用程序只读取第一组选项，这将使TabBar可见。因此，它不会呈现“钱包”屏幕的图标

以下是我的简化代码：

import * as React from 'react';
import { createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createStackNavigator } from '@react-navigation/stack';

import WalletScreen from '../Screens/WalletScreen.js'
import SettingsScreen from '../Screens/SettingsScreen.js'

import BusinessScreenTab from './BusinessScreenTab'

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

  function WalletStack (){
    return(
      <Stack.Navigator 
      initialRouteName='Wallet'
      headerMode='none'>
          <Stack.Screen name='Wallet' component={WalletScreen}/>      
          <Stack.Screen name='Business' component={BusinessScreenTab} /> 
      </Stack.Navigator>
    )}

    _getTabBarVisibility = (route) => {
      const routeName = route.state
        ? route.state.routes[route.state.index].name
        : ''; 
      if (routeName === 'Business') {
        return false;
      }
      return true;
    }

export default function MainAppTab () {
    return(
          <Tab.Navigator 
          initialRouteName='Purchase'
          tabBarOptions={{
            keyboardHidesTabBar: 'true',
            showLabel: 'false',
          }}
          >
            <Tab.Screen name='Wallet' 
              component={WalletStack}
              options={({ route}) => ({
                tabBarVisible: this._getTabBarVisibility(route),
              })}
options={{
                tabBarIcon: ({color,size}) => (
                  <Ionicons name='ios-filing' color={color} size={size}/>),
              }}
              
              />
            <Tab.Screen name='Settings' 
              component={SettingsScreen}
              options={{
                tabBarIcon: ({color,size}) => (
                  <Ionicons name='ios-settings' color={color} size={28}/>),
              }}/>
          </Tab.Navigator>
    )
  }

import*as React from'React'；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}
从“反应本机向量图标/Ionicons”导入Ionicons
从'@react navigation/stack'导入{createStackNavigator}；
从“../Screens/WalletScreen.js”导入WalletScreen
从“../Screens/SettingsScreen.js”导入设置屏幕
从“./BusinessScreenTab”导入BusinessScreenTab
const Tab=createBottomTabNavigator（）；
const Stack=createStackNavigator（）；
功能WalletStack（）{
返回(
)}
_getTabBarVisibility=（路由）=>{
const routeName=route.state
？route.state.routes[route.state.index].name
: ''; 
如果（routeName==‘业务’）{
返回false；
}
返回true；
}
导出默认函数MainAppTab（）{
返回(
({
tabBarVisible:this.\u getTabBarVisibility（路线），
})}
选择权={{
tabBarIcon:（{color，size}）=>(
),
}}
/>
(
),
}}/>
)
}

提前感谢！

请尝试下面的代码

 <Tab.Navigator
    tabBarOptions={{
      activeTintColor: '#0093cb',
      keyboardHidesTabBar:true,
      style: {
        // Remove border top on both android & ios
        borderTopWidth: 1,
        borderTopColor: "#999999",

        },
      }
    }
  >
    <Tab.Screen name="Wallet" component={Wallet StackScreen}
      options={{
        tabBarLabel: 'Wallet',
        tabBarIcon: ({ color, size }) => (
              <Ionicons name='ios-filing' color={color} size={size}/>),
        ),
      }}
    />
    <Tab.Screen name="Settings" component={Settings}
      options={{
        tabBarLabel: 'Settings',
        tabBarIcon: ({ color, size }) => (
              <Ionicons name='ios-settings' color={color} size={28}/>),
        ),
      }}
    />
   

  </Tab.Navigator>

(
),
),
}}
/>
(
),
),
}}
/>

用于隐藏选项卡栏：

  const FeedStack = createStackNavigator({
  Wallet: WalletScreen,
  Business: BusinessScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

---

这将在我们离开源主页的任何时候隐藏选项卡栏。我们可以根据路由名称切换可见性，但如果选项卡栏被隐藏，然后在推另一个路由时再次显示，这将是一件奇怪的事情-它应该只在返回到以前可见的路由时才可见。

您好，阿希什，您的代码没有显示似乎无法解决我的问题。我在调用_getBarVisibility时遇到了“this”问题，我也不知道如何同时使用TabBarIcon函数和TabBarVisibile函数。您好，Mireia，如果您想在我们从feed Wallet导航到业务屏幕时隐藏选项卡栏而不移动导航器，我们无法设置tabBarVisible:BusinessScreen上navigationOptions中的错误配置，因为这些选项仅适用于FeedStack。相反，我们也可以这样做，请检查下面我的新答案