如documentation of the createBottomTabNavigator中所述,导航器内的屏幕可以包含一个名为navigationOptions
的变量,其中它们配置不同的设置。我使用自己的组件成功完成了这项工作,但是,当我尝试将Stack Navigator放入Bottom Tab Navigator中时,我遇到了一个问题。
问题:在创建Stack Navigator时,我不确定在哪里放置navigationOptions
变量来自定义与我创建的Stack Navigator对应的Bottom Tab Navigator的tabIcon
。
我试过这个:(代码片段#1)
const navigator = createStackNavigator(
{
'MainKYCScreen': {
screen: KYCScreen
}
},
{
initialRouteName: "MainKYCScreen"
},
);
const AppContainer = createAppContainer(navigator);
// navigationOptions - start
AppContainer.navigationOptions = {
tabBarIcon: ({ focused }) => (
<NavButtonContainer focused={focused}>
<KYCIcon status={KYCIcon.TYPE_RED} />
</NavButtonContainer>
)
};
// navigationOptions - end
export default AppContainer;
这个:(代码片段#2)
const navigator = createStackNavigator(
{
'MainKYCScreen': {
screen: KYCScreen
}
},
{
initialRouteName: "MainKYCScreen"
},
);
const AppContainer = createAppContainer(navigator);
export default class KYCNavigator extends AppContainer {
// navigationOptions - start
static navigationOptions = {
tabBarIcon: ({ focused }) => (
<NavButtonContainer focused={focused}>
<KYCIcon status={KYCIcon.TYPE_RED} />
</NavButtonContainer>
)
}
// navigationOptions - end
}
将代码从navigationOptions - start
删除到navigationOptions - end
。把它放在那里似乎返回一个奇怪的错误。
有人能帮助我吗?