React Navigation：从其导航器调用屏幕功能 - 有可能吗？

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

有一个示例说明如何从导航标题而不是从导航器的类调用函数export。

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

有没有人遇到过类似的情况？

任何建议将被认真考虑。

聚苯乙烯

@尼姆罗德·阿尔戈夫

以下是我一直在努力实现的目标的详细信息。

ScreenA具有二维码阅读器和submit功能，可将二维码提交到App.js.

App.js 具有 handleSubmit 功能，其中提交的二维码被发送到服务器并标记为有效或无效。

如果提交的二维码无效，ScreenA则必须显示警告消息并更改其背景颜色3 秒。

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

但是，我认为ScreenA更改其背景颜色是责任。因此，我将setTimeout和setState在showWarning()。

Answer 1

我是这样做的：

ScreenA.js

导航到 ScreenB，包括您要调用的函数。

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();