使用MobX商店值动态设置React Navigation屏幕标题的方法？

Question

在我的默认React Navigation选项卡屏幕上，我想将屏幕标题设置为MobX商店中的值。我的理解是，唯一的方法是通过参数传递值 - 所以我不能只将MobX值放在'title：'字段中......但是因为这是'默认'屏幕我我没有传递任何东西。

默认屏幕：

export default class HomeScreen extends Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    title: `This is ${navigation.state.params.title}`,

我试图在componentWillMount期间使用setParams，但是console.log告诉我它必须发生得太晚，所以我在标题中得到一个空对象。

知道怎么做吗？

Answer 1

今天遇到同样的问题并弄清楚了。

只需将navigationOptions更改为函数而不是对象，这样就可以重新评估状态更改。以下是https://reactnavigation.org/docs/intro/headers#Header-interaction-with-screen-component手册中描述的修复方法：

static navigationOptions = ({ navigation }) => {
  const { params = {} } = navigation.state;
  const title = `This is ${params.title}`;
  return { title };
};