React Navigation: вызов функции экрана из своего навигатора — возможно ли это?

Я пытался вызвать функцию, которая находится на экране навигатора, с его экрана.

Чтобы прояснить ситуацию, вот фрагмент моего кода...

//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, но не из класса, который exports является навигатором.

Я думал, что к каждому экрану можно получить доступ через ref, но это вызывает ошибку без объяснения того, что происходит.

Кто-нибудь сталкивался с похожей ситуацией?

Любые советы будут оценены.

P.S.

@ Нимрод Аргов

Вот подробности того, чего я пытался достичь.

ScreenA имеет считыватель QR-кодов и функцию submit, которая отправляет QR-коды в App.js.

App.js имеет функцию handleSubmit, где представленные QR-коды отправляются на сервер и помечаются как действительные или недействительные.

Если отправленный QR-код оказывается недействительным, ScreenA должен показать предупреждающее сообщение и изменить цвет фона на 3 секунды.

Этого можно достичь, если App.js передать реквизит {showWarning:true} ScreenA и передать {showWarning:false} за 3 секунды.

Однако я думал, что ScreenA будет обязан изменить цвет фона. Таким образом, я установил setTimeout и setState в файле showWarning().


react-native javascript react-navigation
person Hiroki    schedule 06.12.2017    source источник
comment
Мне кажется, ты пытаешься что-то форсировать, хотя, возможно, это не самая лучшая идея. Однако вы спрашиваете о реализации. Не могли бы вы подробнее рассказать о чего вы на самом деле пытаетесь достичь?   -  person Kraylog    schedule 06.12.2017
comment
@NimrodArgov Спасибо, я добавил детали в исходное описание.   -  person Hiroki    schedule 07.12.2017

Ответы (1)


arrow_upward
6
arrow_downward

Я сделал это следующим образом:

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();
person Val    schedule 06.12.2017
comment
Спасибо за ваше предложение. К сожалению, этот подход не работает, когда navigation.navigate( ) находится внутри заголовка (т.е. static navigationOptions). - person Hiroki; 08.12.2017
comment
@Hiroki Это еще одна тема о том, как получить доступ к props.navigation. Здесь есть ответ "title="реагировать на родную реакцию навигации, как мне получить доступ к состоянию компонентов из статики"> stackoverflow.com/questions/43400151/ - person Val; 08.12.2017
comment
Большое спасибо. Я поставил +1 к посту. - person Hiroki; 08.12.2017
comment
возможно ли это с экрана А на экран С? - person Mike Victoria; 03.09.2020