我目前有一个标签导航器嵌套在堆栈导航器中。
我一直在尝试调整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的新手,因此一直以来都在努力寻找答案。
谢谢!