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导航器的类调用。

我认为可以通过ref访问每个屏幕，但这会导致错误，而不会解释正在发生的事情。

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

任何建议都将受到赞赏。

P.S。

@Nimrod Argov

以下是我一直在努力实现的细节。

ScreenA有一个QR码阅读器和submit功能，可将QR码提交给App.js。

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

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

可以通过App.js将道具{showWarning:true}传递给ScreenA并在3秒内传递{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();

反应导航：从导航器调用屏幕功能 - 是否可能？

1 个答案:

ScreenA.js

ScreenB.js