react-navigation 动态标题不起作用？答案

【问题标题】：react-navigation dynamic header doesn't work?react-navigation 动态标题不起作用？
【发布时间】：2017-04-19 02:54:17
【问题描述】：

我完全按照教程https://reactnavigation.org/docs/intro/ 但是标题没有出现。这是代码和结果

import Expo from 'expo';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import {StackNavigator} from 'react-navigation';


class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  }

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text>Open up main.js to start working on your app!</Text>
        <Button onPress={()=>navigate('Chat',{user:'Lucy'})} title = 'Chat with Lucy'></Button>
      </View>
    );
  }
}
class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
const SimpleApp = StackNavigator({
  Home: {screen: HomeScreen},
  Chat: {screen: ChatScreen}
})
Expo.registerRootComponent(SimpleApp);

这是我点击按钮时的屏幕结果

另一个问题是，如果我只使用

static navigationOptions = {
    title: 'Chat with Lucy',
  };

然后，“欢迎”仍然在标记“

【问题讨论】：

这周剩下的时间我真的很忙，但是当我有空的时候我会试着回到这里。由于现在有两个类似问题的问题，我的直觉是它可能与 react、react-native 和 react-navigation 版本有关，所以你能发布你正在使用的内容吗？这样我就可以准确地复制你的情况。

标签： react-native react-navigation expo

【解决方案1】：

您使用的文档版本比您安装的版本更新 (similar issue on githib)。这是关于 npm 和 github 版本之间的区别。文档适用于较新的 github 版本，但是您从 npm 安装了 react-navigation。

问题是您现在不能将navigationOptions 用作函数。当你这样做时，它找不到navigationOptions，所以不会有标题。改用这个：

static navigationOptions = {
  title: (navigation) => (`Chat with ${navigation.state.params.user}`),
};

当标题存在时，上一页标题将不会显示在页眉的左侧。

或者更新你的package.json，这样你就可以使用react-navigation文档的版本了：

"react-navigation": "git+https://github.com/react-community/react-navigation.git#7165efc",

【讨论】：