Реагировать на собственный поток маршрутизатора, выполнять функцию сохранения при нажатии кнопки возврата в заголовке

Я нашел способ сделать это, когда вы запускаете страницу действий, например. Actions.Home({onBack: () => console.info('пользовательский обратный вызов') }); однако я не думаю, что это сработает для меня. Вот макет экрана того, как клиент хочет, чтобы приложение было выполнено: Реагировать на собственный поток маршрутизатора, выполнять функцию сохранения при нажатии кнопки возврата в заголовке, где кнопка «Назад» будет работать как кнопка сохранения для страницы ввода данных.

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

Что мне нужно, так это обработать данные и сохранить их, затем продолжить, чтобы вернуться на предыдущую страницу, или, если данные недействительны, я хочу сказать: «Остаться и внести изменения или уйти без сохранения?».

Как я могу обеспечить эту функцию onBack, как только я попаду на страницу и получу доступ к полям, с которыми они будут работать?

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
332
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я нашел (или, по крайней мере, а) способ сделать это. В componentDidMount вы хотите обновить страницу и указать свою функцию onBack теперь, когда у вас есть к ней доступ:

componentDidMount() {
    setTimeout(()=> {
        Actions.refresh({onBack:()=>this.onBack()})
    });
}

Обновлено: Google вернул меня сюда (вставьте мем Таноса, если хотите) после обновления RNRF до 4.1.0-beta.8 и обнаружил, что приведенный выше код, похоже, не выполняется. Исправление состояло в том, чтобы импортировать InteractionManager из react-native и обернуть его вокруг старого кода следующим образом:

componentDidMount() {

        InteractionManager.runAfterInteractions(()=> {
            Actions.refresh({onBack:()=>{
                this.props.handleReturnedImage({ uri: this.state.uri });
                Actions.pop();
            }});
        })

    }

В методе render() вы можете добавить панель навигации, которая содержит кнопку «Назад», и когда эта кнопка «Назад» нажимается, вызывается функция «onTap()», после чего вы можете написать все, что хотите, в функции onTap(). Чтобы вернуться, вы можете использовать метод Actions.pop().

Таким образом, вы можете сделать, например, если данные обрабатываются Actions.pop(), иначе сделайте что-то еще.

Другие вопросы по теме