2

我目前有一个嵌套在堆栈导航器中的选项卡导航器。

我一直在尝试调整我的选项卡导航器，以便它能够利用useContext()钩子有条件地显示选项卡，但没有任何运气。

这是我的navigation.js文件：

const TabNavigator = createBottomTabNavigator(
  {
    ...(myInfo
      ? {
          MyInfo: {
            screen: MyInfo,
            navigationOptions: {
              tabBarIcon: ({ focused }) => {
                let source;
                focused
                  ? (source = require('../assets/MyInfo_Inactive.png'))
                  : (source = require('../assets/MyInfo_Inactive.png'));
                return <Image style={{ marginTop: 30 }} source={source} />;
              },
            },
          },
        }
      : {}),
    Account: {
      screen: Account,
      navigationOptions: {
        tabBarIcon: ({ focused }) => {
          let source;
          focused
            ? (source = require('../assets/Account_Inactive.png'))
            : (source = require('../assets/Account_Inactive.png'));
          return <Image style={{ marginTop: 30 }} source={source} />;
        },
      },
    },
  },
  {
    defaultNavigationOptions: {
      tabBarOptions: {
        showLabel: false,
      },
    },
  },
);

const MainStackNavigator = createStackNavigator(
  {
    Tabs: {
      screen: TabNavigator,
    },
    Login: {
      screen: Login,
    },
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none',
  },
);

export default MainStackNavigator;

'myInfo' 来自我的上下文。

和我的App.js文件：

const AppContainer = createAppContainer(MainStackNavigator);

const App: () => React$Node = () => {
  return (
    <AccountProvider>
        <AppContainer />
    </AccountProvider>
  );
};

export default App;

任何帮助都非常感谢，因为我是 React Native 的新手，并且一直试图找到一个有效的答案。

谢谢！

4

0 回答 0