У меня есть два экрана: A и B, подключенные к StackNavigator.
Экран A - это сканер QR-кода. Как только QR-код отсканирован, он переходит на экран B.
На экране B я выполняю вызов API, используя QR-код, который передается в качестве параметра навигации с экрана A. Я вызываю этот вызов API в componentDidMount.
Моя проблема: если я перейду от A к B, затем обратно к A, а затем снова к B, componentDidMount не вызывается, и у меня нет возможности вызвать вызов API.
Вот код
Экран А
Функция-обработчик, которая вызывается при сканировании QR-кода:
handleQRCode = qrCode => {
NavigationService.navigate('Decode', {qrCode});
};
Экран B
QR-код извлекается из параметров состояния навигации и используется для вызова API (startDecode) через redux.
componentDidMount() {
qrCode = this.props.navigation.state.params.qrCode;
this.props.startDecode(qrCode.data);
}
Моя проблема в том, что componentDidMount вызывается только при первом использовании этого маршрута.
@JoseVf Я только что добавил код
Это происходит потому, что компонент B монтируется только при первом обращении к нему, поэтому componentDidMount больше не будет вызываться.
Я рекомендую вам передать обратный вызов методу setOnNavigatorEvent
вашего навигатора с событием didAppear. Ваш обратный вызов будет вызываться при каждом событии, генерируемом response-native-navigation, и вы можете проверять выполнение своей логики каждый раз, когда появляется экран (отсюда и использование события didAppear). Вы можете основывать свой код на следующем:
export default class ExampleScreen extends Component {
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent(event) {
if (event.id === 'didAppear') {
// do API call here
}
}
}
Возможно, я ошибаюсь, но является ли эта версия Wix реактивной навигацией? Я не могу вызвать setOnNavigatorEvent в моем навигаторе стека
Да, это так. Проверьте документацию wix.github.io/react-native-navigation/#/…
Что происходит, когда вы пытаетесь его использовать?
«не функция». Я использую reactnavigation.org/docs/en/stack-actions.html
Это не от wix. По тегу «response-native-navigation» в вашем посте я подумал, что вы используете wix.
Приношу свои извинения, я должен был обратить внимание на теги. Я их обновил.
В react-navigation
каждый экран остается смонтированным. Это означает, что когда вы вернетесь к B, вы могли изменить реквизиты, но componentDidMount
уже был вызван при первом создании этого экрана.
Для вас доступны два варианта (AFAIK), которые могут справиться с этим делом:
this.props.navigation.navigate()
вы можете использовать
this.props.navigation.push
, который создаст еще один экземпляр
экран B, таким образом вызывая жизненный цикл componentDidMount
React
мероприятие.getDerivedPropsFromState
или это может быть сделано в ближайшее время
не рекомендуется componentWillReceiveProps
.Я пробовал нажать вот так -> this.props.navigation.push ('Decode', {qrCode}), но componentDidMount по-прежнему не вызывается.
Я также не обязательно меняю реквизиты, когда перехожу на экран B, но я ожидаю, что он снова вызовет вызов API, чтобы обновить локальную копию
относительно вашего первого ответа - это действительно странно, потому что по определению push
должен создать новый экземпляр, таким образом вызывая componentDidMount
относительно вашего второго ответа - Если вы не меняете реквизиты, вы просто показываете уже смонтированный экран B, поэтому componentDidMount
не будет вызываться снова
У меня возникла аналогичная проблема, и я использовал this.props.navigation.addListener()
для ее решения. В принципе, принудительный вызов componentDidMount()
может быть возможен, если снова нажать на тот же экран используя ключ (я не пробовал), но ваш стек также будет расти, что не оптимально. Итак, когда вы вернетесь к экрану, который уже находится в стеке, вы можете использовать addListener()
, чтобы увидеть, не перефокусируется ли он, и вы можете скопировать свой код componentDidMount()
здесь:
class MyClass extends Component {
someProcess = () => {
// Code common between componentDidMount() and willFocus()
}
componentDidMount() {
this.someProcess();
}
willFocus = this.props.navigation.addListener(
'willFocus',
(payload) => {
this.someProcess();
}
);
}
Когда MyClass
вызывается в первый раз, вызывается componentDidMount
. В других случаях, когда он все еще находится в стеке, но вместо этого просто получает фокус, вызывается addListener
.
Вы можете поделиться фрагментом кода?