有没有办法在react native中访问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's的_OpenFilterModel函数。实际上，我想通过点击Drawer的菜单来打开屏幕的Modal(它将对当前screen Component执行更多操作(，screen Component本身就是其中的子级。

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]相应地创建DrawerNavigator屏幕序列。Main Screen处于index 0。