可重用的createMaterialTopTabNavigator

Question

我正在使用createMaterialTopTabNavigator在我的应用程序上创建标签，我想在多个屏幕上使用它，但是我遇到了问题，它是onPress的功能，如果不知道如何访问它我在其他屏幕上重复使用createMaterialTopTabNavigator。

FlatList组件-我将使用它来创建标签页

import React, { Component } from 'react';
import { View, TouchableOpacity, Text, Image, FlatList } from 'react-native';

class FlatList extends Component {
  renderHeroItem(data) {
    const { heroIcon, heroName } = data.item;

    return (
      <View style={styles.flatListContainer}>

         //This is the onPress i want to be accessible across the reusable TabNavigator

        <TouchableOpacity onPress={() => console.log('Here!')}>
          <Text>{heroName}</Text>
        </TouchableOpacity>
      </View>
    );
  }

  render() {
    return (
      <FlatList data={this.props.HeroData} renderItem={data => this.renderHeroItem(data)} />
    );
  }
}

MenuTabsNav-单独的js文件，用于呈现createMaterialTopTabNavigator

import React from 'react';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';

import FlatListfrom './FlatList';

import HeroTankData from './HeroFlatListData/HeroTank/HeroData';
import HeroFighterData from './HeroFlatListData/HeroFighter/HeroData';
import HeroAssassinData from './HeroFlatListData/HeroAssassin/HeroData';

const MenuTabsNav = createMaterialTopTabNavigator(
  {
    Tank: {
      screen: props => <FlatList {...props} HeroData={HeroTankData} />
    },
    Fighter: {
      screen: props => <FlatList {...props} HeroData={HeroFighterData} />
    },
    Assassin: {
      screen: props => <FlatList {...props} HeroData={HeroAssassinData} />
    }
  }
);

export default createAppContainer(MenuTabsNav);

现在，我将在我的应用中使用MenuTabsNav进入多个屏幕

Screen1

import React, { Component } from 'react';
import MenuTabsNav  from './MenuTabsNav ';

class Screen1 extends Component {
  render() {
    return (
      <MenuTabsNav  />
    );
  }
}

Screen2

import React, { Component } from 'react';
import MenuTabsNav  from './MenuTabsNav ';

class Screen2 extends Component {
  render() {
    return (
      <MenuTabsNav  />
    );
  }
}

但是我如何从FlatList组件访问或使用onPress函数以在<MenuTabsNav />中使用？ onPress函数在不同屏幕上的每次重用将具有不同的用途

我尝试在FlatList组件的onPress={() => this.props.onPress}上传递道具，然后在MenuTabsNav上再次尝试在<FlatList {...props} HeroData={HeroTankData} onPress={() => this.props.onPress} />上传递道具，最后在{{1} }