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

本文介绍了react-navigation之动态修改title的内容，分享给大家，具体如下：

效果图：

动态修改title内容：

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

ps:`chat with ${state.params.user}` 这里有个注意的地方，是这个符号·而不是单引号‘

index.android.js

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

rootapp.js:

/**
 * 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;

chatscreen.js:

/**
 * 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;

效果2：

/** * 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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。