React导航:从其导航器中调用屏幕的函数 - 是否有可能

Question

我一直在尝试调用来自其屏幕屏幕屏幕中的函数。

要澄清这一点，这是我的代码的片段...

//ScreenA.js
export default class ScreenA extends React.Component {
    showWarning(){
        this.setState({showWarning: true});
        setTimeout(function() {
            this.setState({showWarning: false});
        }.bind(this), 3000);
    }
    render() {
        return (
          <View  style={{backgroundColor : this.state.showWarning ? "#red" : "#blue"}}>
              {this.state.showWarning && <Warning />}
          </View>
        )
    }
}
//Nagigator.js
default export const Navigator = StackNavigator({
  ScreenA: {screen: ScreenA},
  ScreenB: {screen: ScreenB},
});
//App.js
export default class App extends React.Component {
    handleSubmit(qrCode){
        if(qrCodeIsInvalid){
            this.navigator.ScreenA.showWarning();
            //This is just a sudo code.
            //How do we call ScreenA.showWarning here?
        }
    }

    render() {
        let props = {/*some props here*/};            
        return (//This "ref" stops the application without describing any reason
            <Navigator screenProps={props} ref={nav => { this.navigator = nav; }}/>
        );
    }
}

有一个如何从导航 header 调用函数的示例，而不是从 export s导航器的类中。

我认为可以通过参考访问每个屏幕，但这会导致错误而不解释发生了什么。

有人遇到类似情况吗？

任何建议都将不胜感激。

p.s。

@ nimrod argov

这是我一直在尝试实现的详细信息。

ScreenA具有QR代码读取器和submit功能，将QR码提交给App.js。

App.js具有handlesubmit函数，在其中提交的QR码发送到服务器并标记为有效或无效。

如果提交的QR代码被认为无效，则ScreenA必须显示警告消息并更改其背景颜色 3秒钟。

可以通过使App.js将Prop {showWarning:true}传递到ScreenA并在3秒内通过{showWarning:false}来实现。

但是，我认为改变其背景颜色是ScreenA的责任。因此，我在showWarning()中设置setTimeout和setState。

Answer 1

我这样做：

screena.js

在导航到屏幕B时，包括您要调用的功能。

export default class ScreenA extends React.Component {
    constructor(props) {
        super(props);
        this.doSomething = this.doSomething.bind(this);
    }
    doSomething() {
        this.setState({blah: true});
    }
    navigateToB() {
        this.props.navigation.navigate('ScreenB', {
            doSomething: this.doSomething,
        });
    }
}

screenb.js

因此您可以在ScreenB中执行此操作。

const { state, setParams, navigate } = this.props.navigation;
const params = state.params || {};
params.doSomething();