react-navigation之动态修改title的内容

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

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import {  AppRegistry,}from 'react-native';import rootApp from './js/rootApp'AppRegistry.registerComponent('GankProject', () = >rootApp);

/** * Created by Administrator on 2017/3/31 0031. */'use strict'import React from 'react';import {  AppRegistry,  Text,  View,  Button,}from 'react-native';import {  StackNavigator}from 'react-navigation';import ChatScreen from './ChatScreen';class HomeScreen extends React.Component {  static navigationOptions = {    title: 'Welcome',    //设置标题内容  };      render() {      const {        navigate      } = this.props.navigation;      return ( < View > <Text > Hello, Navigation ! </Text>         <Button          onPress={() => navigate('Chat',{user:'Lucy'})}           title="Chat with Lucy"/ > </View>    );  }} const SimpleApp = StackNavigator({   Home: {screen: HomeScreen},   Chat:{screen:ChatScreen}, }); export default SimpleApp;

/** * Created by Administrator on 2017/3/31 0031. */'use strict'import React,{Component}from 'react';import {View,Text}from 'react-native';class ChatScreen extends Component {  static navigationOptions = {    title: ({state}) = >`Chat with $ {state.params.user}`  };  render() {    const {params} = this.props.navigation.state;    return ( < View > <Text > Chat with {      params.user    } < /Text>      </View > );  }}export default ChatScreen;

/** * Created by Administrator on 2017/3/31 0031. */'use strict'import React, { Component}from 'react';import {View, Text, Button}from 'react-native';class ChatScreen extends Component {  static navigationOptions = {    title: ({        state      }) => {        if (state.params.mode === 'info') {          return `${state.params.user}'s Contact Info`;        }        return `Chat with ${state.params.user}`;      },      header: ({state, setParams}) => {        // The navigation prop has functions like setParams, goBack, and navigate.          let right = ( < Button title = {            `${state.params.user}'s info`          }          onPress = {            () => setParams({              mode: 'info'            })          }          />               );        if (state.params.mode === 'info') {       right = (         <Button             title="Done"              onPress={() => setParams({ mode: 'none' })}           / >        );      }    return {right};  },};render() {  const {    params  } = this.props.navigation.state;  return (     < View >    < Text > Chat with {params.user} < /Text>     </View >  );}}export default ChatScreen;