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

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

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

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
    }
  }
);

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

ОБНОВЛЕНИЕ

Думаю еще об одном подходе.

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

Вы можете создать функцию, которая отображает ответ сервера на RouteConfigs и вызывает функцию в методе рендеринга.

ВНИМАНИЕ. использование этого подхода очень рискованно, потому что при каждом повторном рендеринге навигатор восстанавливается. Если вы можете настроить свой View no для повторного рендеринга после создания вкладок, вы можете обойтись без этого подхода.

 const mapArrayToTabs = (myArray) =>{
        let result = {}
        myArray.map( (item,index) =>{
            result[item] = {
                screen: ()=> <YourComponent/>,
                navigationOptions: {...}
            }
        } )
        return result
    }

    const createCustomTabs =()=>{

        const MyTabs = createAppContainer(
            createMaterialTopTabNavigator(
                mapArrayToTabs(["Screen1", "Screen2"] ),
                tabBarOptions: {...}
            )
        )

        return <MyTabs/>

    }


    render(){
        <View>
            {this.createCustomTabs()}
        </View>
    }