React-native / redux - как заново инициализировать экран с помощью навигации?

Question

Я занимаюсь разработкой реактивного / редукционного приложения с навигатором в виде нижней вкладки, аналогичного примеру https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance. Все мои экраны подключаются к хранилищу Redux и отображают общие данные, однако мне бы хотелось по крайней мере один из этих экранов, чтобы игнорировать текущие данные в хранилище и вместо этого заново инициализировать эти данные каждый раз, когда к ним осуществляется переход (вместо того, чтобы продолжать отображать данные в том состоянии, в котором они были оставлены в последний раз).

На экране есть метод для этого, но я не могу понять, как вызвать его после первого отображения экрана (например, из конструктора или componentDidMount () метод). Я не могу вызвать его из метода render () , так как это приводит к ошибке «Невозможно обновить во время существующего перехода состояния».

Мне нужно, чтобы мой навигатор каким-то образом вызывал метод HomeScreen.initializeData () при каждом нажатии значка Home, но как мне это сделать?

HomeScreen.js

initializeData() {
    this.props.resetData(initialValue);
}


const initialValue = ... 

( resetData () - это функция отправки, которая повторно инициализирует хранилище Redux).

Answer 1

Обновление состояния из render () создаст бесконечный цикл. Кроме того, вы не хотите запускать обновление состояния каждый раз, когда компонент выполняет повторную визуализацию, только при нажатии кнопки вкладки. Это говорит мне, что правильное место для обновления состояния - это некоторая функция onPress на кнопке со вкладкой.

Таким образом, теперь вопрос заключается в том, как реализовать некоторую функцию onPress на кнопке со вкладкой. Я считаю, что это ответ на этот вопрос: Есть ли вкладка onPress для TabNavigator в реагирующей навигации?

Answer 2

Итак, я нашел ответ, он немного сложнее, чем можно было ожидать: как указал Vinicius, мне нужно использовать опцию навигации tabBarOnPress, но мне также нужно сделать мою функцию отправки доступной для этой опции навигации.

Чтобы сделать это, я обнаружил, что мне нужно передать ссылку на мою функцию отправки (которая доступна как свойство моего экрана) в опцию навигации, поэтому я использовал навигационные параметры, чтобы сделать это, и вот что я 'В итоге мы получили:

HomeScreen.js :

componentDidMount() {
    initializeData(this.props);
    this.props.navigation.setParams({ homeProps: this.props });
}

export const initializeData = (homeProps) => {
    homeProps.resetData(initialValue);
};

const initialValue = ... 

AppNavigator.js :

tabBarOnPress: ({navigation, defaultHandler}) => {
    const routeName = navigation.state.routeName;

    if (navigation.state.params === undefined) {
        // no params available
    } else if (routeName === 'Home') {
        let homeProps = navigation.getParam('homeProps', null);
        initializeData(homeProps);
    } else if (routeName === ...
        ...
    }

    defaultHandler();
}

Примечания:

• Я передаю реквизиты как параметр навигации, а не как функцию отправки (которая также работает), поскольку она более гибкая (например, она делает все из моих доступных функций отправки).
• initializeData () вызывается как во время создания HomeScreen (при первом отображении экрана), так и из значка навигации (для последующих отображений экрана).
• Необходимо проверить, что params определено в параметрах навигации, поскольку оно будет неопределенным при первом отображении экрана (поскольку построение экрана еще не произошло).Это также делает необходимым вызывать initializeData () во время создания экрана.