Question

比方说，有一个选项卡视图，其中的选项卡名称为“面包”，“比萨饼”，“饮料”，“甜点”，“奶昔”。这些选项卡的名称是从API获取的。同样，每个选项卡在其各自的屏幕上显示的信息也是从API获取的。现在，当选项卡的数据之一从API中删除时。我也希望将其从“标签视图”中删除。

如何在React Navigation中实现这一目标？

Answer 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中，检查服务器的响应并相应地动态创建选项卡（可以根据响应动态添加按钮）。

更新

我正在考虑另一种方法。

如本link中所述，我们可以创建自己的自定义导航器，并在从API调用获得响应后，在父自定义导航器中动态填充选项卡。我没有相同的确切代码，但是您可以尝试这种方法。

Answer 2

您可以创建一个将服务器响应映射到RouteConfig的函数，并在render方法中调用该函数。

警告。使用此方法非常危险，因为在每次重新渲染时，都会重新生成导航器。如果您可以在创建标签后调整视图否以重新呈现，那么您可以摆脱这种方法。

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

如何基于从API获取的数据在React Navigation中创建或删除标签？

2 个答案: