Как я могу создавать или удалять вкладки в React Navigation на основе данных, полученных из API?

Question

Допустим, есть представление вкладок, в котором есть вкладки с именами: хлеб, пицца, напитки, десерты, коктейли. И название этих вкладок взято из API. Кроме того, информация для каждой вкладки, отображаемой на соответствующих экранах, также извлекается из API. Теперь, когда одна из данных вкладки удаляется из API. Я хочу, чтобы он также был удален из представления вкладок.

Как мне добиться этого в React Navigation?

Answer 1

В реагирующей навигации у нас не может быть динамической вкладки, так как мы должны заранее определить все маршруты статически.

У нас тоже было такое требование, поэтому мы следовали нижеприведенному подходу.

1. Определите все возможные вкладки статически и сделайте вкладки невидимыми.

const MainNav = createBottomTabNavigator(
  {
    Breads: { screen: BreadsStackNavigation },
    Pizzas: { screen: PizzasStackNavigation },
    Beverages: { screen: BeveragesStackNavigation },
    Desserts: { screen: DessertsStackNavigation },
    Shakes: { screen: ShakesStackNavigation }
  },
  {
    initialRouteName: 'HomeStackNavigation',
    defaultNavigationOptions: {
      tabBarVisible: false,
    },
    swipeEnabled: false,
    navigationOptions: {
      header: props => <HeaderView
        navigation={props.navigation}
      />,
      tabBarVisible: false
    }
  }
);

В HeaderView в componentWillReceiveProps проверьте ответ от сервера и, соответственно, динамически создавайте вкладки (возможно, добавляя кнопки динамически в зависимости от ответов).

ОБНОВЛЕНИЕ

Я подумываю еще об одном подходе.

Как указано в этой ссылке , мы можем создать наш собственный настраиваемый навигатор и динамически заполнять вкладки в родительском настраиваемом навигаторе.после получения ответа от вызова API.У меня нет точного кода для того же, но вы можете попробовать этот подход.