Как я могу обновить настраиваемый компонент заголовка верхней панели в React Native Navigation v2?

Я пытаюсь обновить настраиваемый компонент заголовка topBar после того, как он уже стал видимым. Я попытался вызвать Navigation.mergeOptions и безуспешно использовать passProps.

Начальные варианты:

...
static options(passProps) {
  return {
    topBar: {
      title: {
        component: {
          id: "rn.MyCustomTopBar",
          name: "rn.MyCustomTopBar",
          alignment: "fill",
          passProps: {
            dynamicField: "Initial Value"
          }
        }
      }
    }
  };
}
...

Использование mergeOptions:

...
Navigation.mergeOptions(this.props.componentId, {
  topBar: {
    title: {
      component: {
        passProps: {
          dynamicField: "New Value"
        }
      }
    }
  }
});
...

Похоже, что на GitHub есть закрытая проблема, касающаяся mergeOptions для пользовательских компонентов, https://github.com/wix/react-native-navigation/issues/3782, сообщив, что она будет решена в # 3030, однако у этой проблемы нет вехи и не было никаких действий с июня. https://github.com/wix/react-native-navigation/issues/3030

Если кто-нибудь может предоставить обходной путь и пример того, как этого можно достичь, он будет очень признателен.


react-native react-native-navigation
person Enlightened Mouse    schedule 30.10.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Настраиваемую верхнюю панель можно обновить, передав ссылку обратно родительскому элементу через passProps. Затем родительский элемент может использовать ссылку для вызова функции на верхней панели, которая соответствующим образом изменит свое состояние.

Родительский компонент:

...
constructor() {
  super(props);
  Navigation.events().bindComponent(this);

  this._customTopBar = null;
}
...
componentDidMount() {
  Navigation.mergeOptions(this.props.componentId, {
    topBar: {
      title: {
        component: {
          passProps: {
            passRef: ref => {
              this._customTopBar = ref;
            }
          }
        }
      }
    }
  });
}
...
// called whenever custom title needs to be updated
this._customTopBar.updateState(...);
...

Пользовательский компонент:

...
componentDidMount() {
  this.props.passRef(this);
}
...
updateState(...) {
  this.setState(...);
}
...

Примечание. Это не было протестировано на Android.

person Enlightened Mouse    schedule 01.11.2018