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

Question

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

默认屏幕：

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

我试图在 componentWillMount 期间使用 setParams，但 console.log 告诉我它一定发生得太晚了，所以我在标题中得到一个空的 object。

知道怎么做吗？

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

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

Way to dynamically set a React Navigation screen title using MobX store value?

react-native

mobx

react-navigation