Question

我有一个Screen，我在其中嵌入了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”，但“道具”中没有这个：contentComponent: props => <MenuContent {...props} />

Answer 1

1.存储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} />
        );
    }
}

2.give 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.在MenuContent

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

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

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

1 个答案: