react-navigation动态标题不起作用? [英] react-navigation dynamic header doesn't work?

问题描述

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

I followed exactly the tutorial https://reactnavigation.org/docs/intro/ But the header does not show up. Here is the code and the result

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

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

And here is the screen result when I click on the button

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

Another problem is that if I only use

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

然后，欢迎"仍位于标记<"旁边，这与本教程不同.

Then, the "Welcome" is still next to the mark "<", which is different from the tutorial.

推荐答案

您使用的文档的版本比已安装的版本(

You are using docs for a version newer than the version you have installed (similar issue on githib). It's about difference between npm and github versions. Documents are for the github version, which is newer, but you installed react-navigation from npm.

问题是您现在不能使用navigationOptions作为函数.当您这样做时，它找不到navigationOptions，因此不会有标题.改为使用此:

The problem is you can't use navigationOptions as a function right now. When you do that it can't find navigationOptions, so there won't be a header. Use instead this:

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

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

When title exist, previous page title won't be shown left of the header.

或更新您的package.json，因此您可以使用 react-navigation 文档的版本:

Or update your package.json, so you can use the version of react-navigation docs:

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

这篇关于react-navigation动态标题不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！