react-native - 使用 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 };
};