Как установить параметры навигации из внешнего стека навигации? - PullRequest
Новая
       37

Как установить параметры навигации из внешнего стека навигации?

1 голос
/ 12 апреля 2020

В моем приложении есть заголовок, который должен отображать другую кнопку в зависимости от того, есть ли у пользователя уведомления. Вот как я сейчас настроил его на своих страницах: 

static navigationOptions = ({ navigation }) => {
    return {
      title: 'My Profile',
      headerRight: () => (
        <Button
          type="clear"
          icon={() => <Icon
            type="material-community"
            size={25}
            name={UserProvider.bNotifications ? 'bell' : 'bell-outline'}
            color={UserProvider.bNotifications ? COLORS.WARNING : COLORS.WHITE}
          />}
          onPress={() => navigation.navigate('Notifications', null)}
        />
      )
    }
  };

Проблема в том, что если UserProvider.bNotifications меняет значение, кнопка заголовка не обновляется, пока страница не будет изменена / перерисована.

Я хочу переключиться на использование свойства navigation, которое передается в эти navigationOptions, но я не знаю, как получить к нему доступ из-за пределов стека навигации. UserProvider является классом stati c (НЕ компонентом), поэтому я не могу получить доступ к навигационному элементу обычным способом (или с помощью ловушки useNavigation).

У меня есть NavigationProvider класс, который имеет доступ к NavigationContainer для приложения. Я использую его для запуска навигации без компонентов. Есть ли какой-нибудь способ, которым я могу установить параметры для свойства навигации, используя ту же ссылку?

NavigationProvider: 

import { NavigationActions } from 'react-navigation';

let _navigator;

function getNavigator() {
  return _navigator;
}

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

function goBack() {
  _navigator.dispatch(
    NavigationActions.back()
  );
}

export default {
  navigate,
  setTopLevelNavigator,
  getNavigator,
  goBack
};

Ссылка установлена ​​следующим образом в моем компоненте приложения верхнего уровня: 

<AppContainer
        ref={navigatorRef => {
          console.log(navigatorRef.props.navigation);
          NavigationProvider.setTopLevelNavigator(navigatorRef);
        }}
      />

РЕДАКТИРОВАТЬ - UserProvider Это только суть моего класса UserProvider, но он должен передать, как он работает. 

export default class UserProvider {
  private static _bNotifications: boolean;

  static get bNotifications(): boolean {
    if (!this.hasInitNotifications)
      this.initNotficationWatch();
    return this._bNotifications;
  }

  static set bNotifications(bNotifications: boolean) {
    this._bNotifications = bNotifications;
  }

  static initNotficationWatch() {
    //Firebase listener on notification
    if(notifications){
      this.bNotifications = true;
    } else {
      this.bNotifications = false;
    }
  }
}

1 Ответ

0 голосов
/ 12 апреля 2020

Как установить параметры навигации из внешнего стека навигации?

, чтобы сделать это, вы должны использовать метод getParam, полученный из navigation проп. Я бы хотел, чтобы для переменной была задана переменная, равная UserProvider.bNotifications. 

static navigationOptions = ({ navigation }) => {
 let notifications = navigation.getParam('notifications')
    return {
      title: 'My Profile',
      headerRight: () => (
        <Button
          type="clear"
          icon={() => <Icon
            type="material-community"
            size={25}
            name={notifications ? 'bell' : 'bell-outline'}
            color={notifications ? COLORS.WARNING : COLORS.WHITE}
          />}
          onPress={() => navigation.navigate('Notifications', null)}
        />
      )
    }
  };

. Вы можете установить для параметра начальное значение, добавив его в качестве второго. аргумент при необходимости navigation.getParam('paramName', 'param initial value')

Для обновления параметра необходимо использовать метод setParams. Для этого вы можете использовать useNavigation hook.

Вы также можете сделать это внутри функции вместо элемента 

// remember to const navigation = useNavigation()

 <Button
    title="Update param"
    onPress={() => navigation.setParams({notifications: 'new value'})}
  />

Вы также можете инициировать значение таким образом ... но я рекомендовал бы инициализировать значение внутри вашего navigationOptions

Я не проверял код, но он должен работать

RN DOCS : https://reactnavigation.org/docs/2.x/headers/

...