在React Native中使用JSON在Tab Navigator中设置自定义HeaderLabel？

Question

我需要知道如何在React本机选项卡导航中设置自定义标头。

我需要从电子设备中获取类别项目名称。

在那儿，有很多子项，例如电视，移动等，因此我需要根据JSON类别项设置该标签。

    const FooScreen = () => <Center><Text>Foo</Text></Center>;
const BarScreen = () => <Center><Text>Bar</Text></Center>;

const components = {
  Foo: FooScreen,
  Bar: BarScreen,
};

const Center = ({ children }) => (
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>{children}</View>
);

 class Appofmy extends Component {
  constructor() {
    super();
    this.state = {
      screenName: '',componentName:'',dataSource:[]

    };
  }

  componentWillMount() {
    let data = new FormData();
    data.append('methodName',       'items_list');

    Sendshoppinapi(data).then((responseJson)=>{
      this.setState({dataSource: responseJson.data});
      console.warn(responseJson);
      if(responseJson.responseCode == '200'){


      }
      else {
        console.warn(responseJson);
      }
    })
    const pages = [
      { screenName: this.state.dataSource.map((item,i)=>  <Text>{item.catgeory_name}</Text>) ,componentName: 'Foo' },

    ];

    setTimeout(() => {
      const screens = {};
      pages.forEach(page => {
        screens[page.screenName] = { screen: components[page.componentName] };
      });
      this.setState({ tabs: createMaterialTopTabNavigator(screens) });
    }, 2000);
  }

  render() {
    if (this.state.tabs) {
      return <this.state.tabs />;
    }
    return <Center><Text>Loading...</Text></Center>;
  }
}