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

Question

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

默认屏幕：

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 };
};