从导航器外部向 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} />
        );
    }
}

我有一个抽屉导航器，我在其中指定了 "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" 但这在 "props" 中不存在：contentComponent: props => <MenuContent {...props} />

Answer 1

1.store GlobalScreen 实例

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} />
        );
    }
}

2.give contentComponent 获取globalScreen的方法props

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

3.in 菜单内容

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

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

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

Sending parameters to contentComponent of Drawer Navigator from outside the navigator

react-native

react-navigation