反応ナビゲーションの動的ヘッダーが機能しません。

Question

私はチュートリアルに完全に従いました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', 
    }; 

次に使う場合に、 「ウェルカム」はまだチュートリアルとは異なるマーク「<」の横にあります。

Answer 1

あなたがインストールされているバージョン（similar issue on githib）より新しいバージョンのドキュメントを使用しています。 npmとgithubバージョンの違いです。ドキュメントはgithubバージョン用ですが、これは新しいものですが、npmから反応ナビゲーションをインストールしました。

現在、navigationOptionsを機能として使用できないという問題があります。そうするとnavigationOptionsが見つからないので、ヘッダーはありません。代わりにこれを使用してください：

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

タイトルがある場合、前のページタイトルはヘッダーの左側に表示されません。

それとも、反応ナビゲーションドキュメントのバージョンを使用することができますので、あなたのpackage.jsonを更新：

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