React Native在React Navigation6.0版本如何实现动态顶部栏

const tabNames = [{name: 'Java'}, {name: 'Android'}, {name: 'ios'}];

....//中间部分省略 只写出关键部分

 mapRoute = tabNames.reduce((map, item) => {
    const route = () => <PopularTabPage tabLabel={item.name} />;
    //把所有的route都塞进一个对象里
    return {
      ...map,
      [item.name]: route,
    };
  }, {});
  
....//中间部分省略 只写出关键部分

		<Tab.Navigator>
          {
            // Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组
            // ['Java','Android'...]
            Object.keys(mapRoute).map(name => (
              <Tab.Screen name={name} component={mapRoute[name]} key={name} />
            ))
          }
        </Tab.Navigator>