Установить Custom HeaderLabel в Tab Navigator, используя JSON в React native?

Question

Мне нужно знать, как установить пользовательский заголовок в навигации React по умолчанию.

Мне нужно получить имена элементов категории из электроники.

В этом есть много подпунктов, таких как TV, мобильный и т. д., поэтому мне нужно установить эту метку на основе элементов категории 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>;
  }
}