Question

我试图在自定义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上似乎有一个关于自定义组件https://github.com/wix/react-native-navigation/issues/3782上的mergeOptions的封闭问题，说它将在＃3030中得到解决，但是该问题没有里程碑，自6月以来没有任何活动。。 https://github.com/wix/react-native-navigation/issues/3030

如果任何人都可以提供解决方法以及如何实现此目的的示例，将不胜感激。

Answer 1

可以通过通过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上进行测试。

如何在React Native Navigation v2中更新自定义顶部栏标题组件？

1 个答案: