从导航器外部将参数发送到Drawer Navigator的contentComponent

Question

我有一个嵌入了DrawerNavigator的屏幕。

import React, { Component } from "react"; 
import { GlobalNavigator } from "../navigators/globalNavigator"; 

export default class GlobalScreen extends Component { 
    constructor(props) { 
     super(props); 

     this.doSomething= this.doSomething.bind(this); 
    } 

    doSomething() { 
     // do something 
    } 

    render() { 
     return (
      <GlobalNavigator doSomething={this.doSomething} /> 
     ); 
    } 
} 

我有一个Drawer Navigator，其中指定了“contentComponent”。

import React from "react"; 
import { DrawerNavigator } from "react-navigation"; 
import MainScreen from "../screens/mainScreen"; 
import MenuContent from "../components/menuContent"; 

export const GlobalNavigator = DrawerNavigator(
    { 
     Main: { 
      screen: MainScreen 
     } 
    }, 
    { 
     drawerWidth: 350, 
     drawerPosition: "left", 
     initialRouteName: "Main", 
     backBehavior: "initialRoute", 
     contentComponent: props => <MenuContent {...props} /> 
    } 
); 

我想从屏幕发送一个参数到导航器，以便我可以将它传递给“contentComponent”。我怎样才能做到这一点？我试着用 “screenProps”，但是这是不存在的 “道具”：contentComponent: props => <MenuContent {...props} />

Answer 1

1.store的GlobalScreen instanse

import React, { Component } from "react"; 
import { GlobalNavigator } from "../navigators/globalNavigator"; 

var globalScreen = undefined; 

export default class GlobalScreen extends Component { 
    constructor(props) { 
     super(props); 
     globalScreen = this; 
     this.doSomething= this.doSomething.bind(this); 
    } 

    doSomething() { 
     // do something 
    } 

    //param to contentComponent 
    param = {abc:'123'}; 
    someMethod =()=>{ 
     //code 
    }; 

    render() { 
     return (
      <GlobalNavigator doSomething={this.doSomething} /> 
     ); 
    } 
} 

告诉上司contentComponent的方法道具来获得globalScreen

export const GlobalNavigator = DrawerNavigator(
    { 
     Main: { 
      screen: MainScreen 
     } 
    }, 
    { 
     drawerWidth: 350, 
     drawerPosition: "left", 
     initialRouteName: "Main", 
     backBehavior: "initialRoute", 
     contentComponent: props => <MenuContent getMainScreen={() => {return globalScreen;} } {...props} /> 
    } 
); 

3.in MenuContent

let globalScreen = this.props.getMainScreen(); 
let param = globalScreen.param;//param you want to pass to menuContent 
globalScreen.someMethod();//method in globalScreen 

实现，但不是很优雅...... 。