react-navigation：是否可以将回调传递给子级（egchangeHandler）？

Question

我一直在尝试将回调传递到屏幕中。

这是我的实验摘录...

export default class Test extends React.Component {
    constructor(props) {
        super(props);
    };

    handleOnPress(data){
    //How do we pass this callback to "Home" or "Sub"?
    }

    render() {
        const Navigator = StackNavigator({
            Home: {screen: Home},
            Sub:  {screen: Sub}
        });
        let data = {blah:"blah blah"};

        return (<Navigator screenProps={data} />);
    }
}

在这个例子中，我可以this.props.screenProps.blah在这两个Home和Sub。我认为能够传递道具也意味着能够传递回呼，但我觉得我不对。

有没有人遇到这个问题？

任何建议将被认真考虑。

Answer 1

不建议通过 React Native 导航参数传递回调，这可能会导致状态冻结（无法正确更新）。这里更好的解决方案是使用 EventEmitter，因此回调保留在 Screen1 中，并在 Screen2 发出事件时调用。

屏幕 1 代码：

import DeviceEventEmitter from "react-native"

DeviceEventEmitter.addListener("event.testEvent", (eventData) => 
callbackYouWantedToPass(eventData)));

屏幕2代码：

import DeviceEventEmitter from "react-native"

DeviceEventEmitter.emit("event.testEvent", {eventData});

useEffect(() => {
    return () => {
        DeviceEventEmitter.removeAllListeners("event.mapMarkerSelected")
    };
}, []);

Answer 2

如果仅要将回调传递给孩子，则也可以在渲染器中指定它作为道具：

<Navigator callback={this.handleOnPress} {/*And any other props you want to pass*/} />

然后在您Home或您的Sub类中触发您可能期望的回调

class Home extends React.Component {
    //...
    somefunction = () => {
        this.props.callback();
    }
}

这就是我现在在代码中使用的内容。

如果你想将它传递给只任一个虽然Home还是Sub，这这里大概你的答案：https://github.com/react-community/react-navigation/issues/935

const mapNavigationStateParamsToProps = (SomeComponent) => {
    return class extends Component {
        static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
        render() {
            const {navigation: {state: {params}}} = this.props
            return <SomeComponent {...params} {...this.props} />
        }
    }
}

编辑：就我而言，我的处理程序是一个箭头函数，如下所示：

handleOnPress = (data) => {
    //Do something here
}

这样我就不必处理.bind()s

OP的FINAL SOLUTION：看起来StackNavigator要求props作为传递screenProps，因此，render函数变为：

render() {
    const Navigator = StackNavigator({
        Home: {screen: Home},
        Sub:  {screen: Sub}
    });
    let props = {
        data: "data",
        handleOnPress: () => this.handleOnPress()
    };

    return (<Navigator screenProps={props} />);
}