在TabNavigator中访问上下文?反应本机

时间:2019-11-04 21:05:38

标签: react-native tabnavigator react-native-tabnavigator

我目前有一个标签导航器嵌套在堆栈导航器中。

我一直在尝试调整Tabnavigator,以便它能够利用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的新手,因此一直以来都在努力寻找答案。

谢谢!

0 个答案:

没有答案