欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 22:23:08
本文介绍了react-navigation之动态修改title的内容,分享给大家,具体如下: 效果图: 动态修改title内容: static na...

本文介绍了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:

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

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

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