使用react-navigation怎么动态修改title的内容(react-navigation,title,web开发)

动态修改title内容：

staticnavigationOptions={title:({state})=>`Chatwith${state.params.user}`};

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

index.android.js

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

rootApp.js:

/***CreatedbyAdministratoron2017/3/310031.*/'usestrict'importReactfrom'react';import{AppRegistry,Text,View,Button,}from'react-native';import{StackNavigator}from'react-navigation';importChatScreenfrom'./ChatScreen';classHomeScreenextendsReact.Component{staticnavigationOptions={title:'Welcome',//设置标题内容};render(){const{navigate}=this.props.navigation;return(<View><Text>Hello,Navigation!</Text><ButtononPress={()=>navigate('Chat',{user:'Lucy'})}title="ChatwithLucy"/></View>);}}constSimpleApp=StackNavigator({Home:{screen:HomeScreen},Chat:{screen:ChatScreen},});exportdefaultSimpleApp;

ChatScreen.js:

/***CreatedbyAdministratoron2017/3/310031.*/'usestrict'importReact,{Component}from'react';import{View,Text}from'react-native';classChatScreenextendsComponent{staticnavigationOptions={title:({state})=>`Chatwith${state.params.user}`};render(){const{params}=this.props.navigation.state;return(<View><Text>Chatwith{params.user}</Text></View>);}}exportdefaultChatScreen;

效果2：

/***CreatedbyAdministratoron2017/3/310031.*/'usestrict'importReact,{Component}from'react';import{View,Text,Button}from'react-native';classChatScreenextendsComponent{staticnavigationOptions={title:({state})=>{if(state.params.mode==='info'){return`${state.params.user}'sContactInfo`;}return`Chatwith${state.params.user}`;},header:({state,setParams})=>{//ThenavigationprophasfunctionslikesetParams,goBack,andnavigate.letright=(<Buttontitle={`${state.params.user}'sinfo`}onPress={()=>setParams({mode:'info'})}/>);if(state.params.mode==='info'){right=(<Buttontitle="Done"onPress={()=>setParams({mode:'none'})}/>);}return{right};},};render(){const{params}=this.props.navigation.state;return(<View><Text>Chatwith{params.user}</Text></View>);}}exportdefaultChatScreen;