1

假设有一个选项卡视图，其中包含名称为面包、比萨饼、饮料、甜点、奶昔的选项卡。这些选项卡的名称是从 API 中获取的。此外，每个选项卡在各自屏幕上显示的信息也是从 API 中获取的。现在，当 Tab 的数据之一从 API 中删除时。我也希望将其从选项卡视图中删除。

如何在 React Navigation 中实现这一点？

4

2 回答 2

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
    }
  }
);
  1. 在 HeaderView 中，componentWillReceiveProps检查来自服务器的响应并相应地动态创建选项卡（可能是通过根据响应动态添加按钮）。

更新

我正在考虑另一种方法。

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

于 2019-07-05T11:30:17.497 回答
0

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

警告。使用这种方法是非常危险的，因为在每次重新渲染时，导航器都会重新生成。如果您可以在创建选项卡后调整 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>
    }
于 2019-08-09T09:24:40.107 回答