如何在createBottomTabNavigator中有条件地设置选项卡

Question

我有一个静态数据文件(json)，它存储像facebook页面链接这样的信息。如果facebook页面链接为空，我不希望显示"关注我们"选项卡。facebook页面链接存储在businessDataJSON.facebook中。如果businessDataJSON.facebook为空(空字符串)，是否有办法只显示"关注我们"选项卡？这是我的App.js:

const ListStack = createStackNavigator(
{
ListCategories: ListCategoriesScreen,
ListCategoryItems: ListCategoryItemsScreen
},
{
initialRouteName: "ListCategories",
defaultNavigationOptions: {
headerStyle: {
backgroundColor: businessDataJSON.theme.navigationBarBackground
},
headerTintColor: businessDataJSON.theme.navigationBarTint,
headerTitleStyle: {
fontWeight: "bold"
}
}
}
);
const FollowUsStack = createStackNavigator(
{
FollowUs: FollowUsScreen
},
{
initialRouteName: "FollowUs",
defaultNavigationOptions: {
headerStyle: {
backgroundColor: businessDataJSON.theme.navigationBarBackground
},
headerTintColor: businessDataJSON.theme.navigationBarTint,
headerTitleStyle: {
fontWeight: "bold"
}
}
}
);
export default createAppContainer(
createBottomTabNavigator(
{
ListTab: {
screen: ListStack,
navigationOptions: {
title: businessDataJSON.theme.tabBarListTitle,
tabBarIcon: ({ tintColor }) => (
<Icon
name={businessDataJSON.theme.tabBarListIcon}
size={17}
color={tintColor}
/>
)
}
},
FollowUsStack: {
screen: FollowUsStack,
navigationOptions: {
title: "Follow Us",
tabBarIcon: ({ tintColor }) => (
<Icon name="users" size={17} color={tintColor} />
)
}
}
},
{
tabBarOptions: {
activeTintColor: businessDataJSON.theme.tabBarIconActive,
inactiveTintColor: businessDataJSON.theme.tabBarIconInactive,
style: {
elevation: 8,
...Platform.select({
ios: { paddingTop: 4, paddingBottom: 4 },
android: {
borderTopWidth: 0,
paddingTop: 6,
paddingBottom: 6
}
})
}
}
}
)
);

Answer 1

是的，但您需要创建导致导航道具丢失的选项卡，并在没有redux的情况下使用它。我可以看到的简单方法是使用root createSwitchNavigator，其中包含一个加载屏幕/启动屏幕和选项卡作为第二个屏幕。在加载屏幕中，你检查是否有你的facebook页面，并相应地导航到它们。这个例子是针对auth的，但它适用于您的情况。相信我，导航道具是一场噩梦。