Как я могу условно установить вкладки в createBottomTabNavigator?

Question

У меня есть статический файл данных (json), в котором хранится такая информация, как ссылка на страницу в Facebook. Если ссылка на страницу facebook пуста, я НЕ хочу, чтобы отображалась вкладка Follow Us. Ссылка на страницу 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

Да, но вам нужно было бы сделать создание вкладок динамичным, что приведет к потере навигационной реквизита и создать кошмар, чтобы использовать его без лишних слов. Простой подход, который я вижу, заключается в использовании корневого createSwitchNavigator с загрузочным экраном / стартовым экраном и вкладками в качестве 2-го экрана. на экране загрузки вы проверяете, есть ли ваша страница в Facebook, и соответственно переходите к ним. этот пример предназначен для аутентификации, но он работает в вашем случае. поверьте мне, навигационные реквизиты - это кошмар для управления.