javascript - 有没有办法将 DrawerNavigator 的屏幕组件的功能访问到 DrawerNavigator 的菜单按钮中？

Question

我有一个带屏幕的抽屉导航器。现在我想访问抽屉菜单按钮中的单屏功能。假设

抽屉导航器:

const Drawer = createDrawerNavigator(
  {
    Main: {
      path: "/Main",
      screen: MainScreen
    },
    LikeScreen: {
      path: "/Like",
      screen: LikeScreen
    },
    DislikeScreen: {
      path: "/Dislike",
      screen: DislikeScreen
    }
  },
  {
    initialRouteName: "Main",
    drawerWidth: widthPercentageToDP("60%"),
    contentComponent: SideMenu,
    headerMode: "screen"
  }
);

主屏幕:

export default class MainScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      TurnMeOnMainFilterModal: false
    };
  }
 _OpenFilterModel=()=> this.setState({ TurnMeOnMainFilterModal: true });
 _closeFilterModel=()=> this.setState({ TurnMeOnMainFilterModal: false });
  render() {
   return <View>
         <Modal
      animationType="slide"
      transparent={true}
      visible={this.state.TurnMeOnMainFilterModal}
      presentationStyle="overFullScreen"
    >
      <View style={Style1.ModalViewContainer}>
        <View style={Style1.ModalView}>
         <TouchableWithoutFeedback onPress={this._closeFilterModel}>
          <View style={Style1.ModalCloseButton}>
            <Icon
            color="#7BB141"
            name="check"
            size={widthPercentageToDP("8%")}
           />
           </View>
         </TouchableWithoutFeedback>
       </View>
       </View>
         </Modal>
       </View>
}

侧边菜单:

import { NavigationActions } from "react-navigation";
class SideMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { selected: 1, Language:props.screenProps.Language };
    this.changer = this.changer.bind(this);
  }

  navigateToScreen = (route, num) => () => {
    const navigateAction = NavigationActions.navigate({ routeName: route });
    this.changer(num);
    this.props.navigation.dispatch(navigateAction);
  };
  changer(Num) {
    this.setState({ selected: Num });
  }
  render() {
    const { Language } = this.state;
    const color1 = "#0DA4D0",
      color2 = "grey";
    return (
      <View style={Style.Parentcontainer}>
        <TouchableWithoutFeedback onPress={this.navigateToScreen("Main", 1)}>
          <View style={Style.ChildUpperContainer}>
            <Icon
              name="home-outline"
              size={widthPercentageToDP("7%")}
              color={this.state.selected === 1 ? color1 : color2}
            />
            <Text
              style={[
                Style.textFont,
                this.state.selected === 1
                  ? { color: color1 }
                  : { color: color2 }
              ]}
            >
              Home
            </Text>
          </View>
        </TouchableWithoutFeedback>
        {this.state.selected === 1 && (
          <TouchableWithoutFeedback
            onPress={() => {
             ////////////////////(Here I want The Function Of Screen to be access)/////////////////////////
              this.props.navigation.closeDrawer();
            }}
          >
            <View style={Style.ChildUpperContainer}>
              <Icon
                name="filter-outline"
                size={widthPercentageToDP("7%")}
                color={color2}
              />
              <Text style={[Style.textFont, { color: color2 }]}>
                Home Filter
              </Text>
            </View>
          </TouchableWithoutFeedback>
        )}

        <TouchableWithoutFeedback
          onPress={this.navigateToScreen("LikeScreen", 3)}
        >
          <View style={Style.ChildUpperContainer}>
            <Icon
              name="thumb-up-outline"
              size={widthPercentageToDP("7%")}
              color={this.state.selected === 3 ? color1 : color2}
            />
            <Text
              style={[
                Style.textFont,
                this.state.selected === 3
                  ? { color: color1 }
                  : { color: color2 }
              ]}
            >
              Liked
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback
          onPress={this.navigateToScreen("DislikeScreen", 4)}
        >
          <View style={Style.ChildUpperContainer}>
            <Icon
              name="thumb-down-outline"
              size={widthPercentageToDP("7%")}
              color={this.state.selected === 4 ? color1 : color2}
            />
            <Text
              style={[
                Style.textFont,
                this.state.selected === 4
                  ? { color: color1 }
                  : { color: color2 }
              ]}
            >
              Disliked
            </Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

SideMenu.propTypes = {
  navigation: PropTypes.object
};

export default SideMenu;

在 sidemenu 中，我在要访问 MainScreen 的 函数 _OpenFilterModel 的位置进行了注释。其实我想通过点击 Drawer 的菜单打开屏幕的 Modal(这将对当前的 screen Component 执行更多操作)，其中 screen Component 本身是一个 child 。

Answer 1

我最终得到了我自己的以下解决方案:

在主屏幕中:

componentWillMount() {
  this.props.navigation.setParams({
      FilterModel: this._OpenFilterModel
   });
 }

在侧边菜单中:

onPress={() => {
         ////HERE TO CAll
         this.props.navigation.state.routes[0].params.FilterModel();
         this.props.navigation.closeDrawer();
        }}

或

onPress={() => {
         ////HERE TO CAll
         this.props.items[0].params.FilterModel();
         this.props.navigation.closeDrawer();
        }}

routes[0] 和 items[0] 对应于 createDrawerNavigator Screen Sequence 。 主屏幕位于索引0。