react改变title_reactnavigation之动态修改title的内容

本文介绍了react-navigation之动态修改title的内容&＃xff0c;分享给大家&＃xff0c;具体如下&＃xff1a;

效果图&＃xff1a;

动态修改title内容&＃xff1a;

static navigationOptions &＃61; {

title: ({ state }) &＃61;> &＃96;Chat with ${state.params.user}&＃96;

};

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

index.android.js

/**

* Sample React Native App

* https://github.com/facebook/react-native

* &＃64;flow

*/

import {

AppRegistry,

}from &＃39;react-native&＃39;;

import rootApp from &＃39;./js/rootApp&＃39;

AppRegistry.registerComponent(&＃39;GankProject&＃39;, () &＃61; >rootApp);

rootApp.js:

/**

* Created by Administrator on 2017/3/31 0031.

*/

&＃39;use strict&＃39;import React from &＃39;react&＃39;;

import {

AppRegistry,

Text,

View,

Button,

}

from &＃39;react-native&＃39;;

import {

StackNavigator

}

from &＃39;react-navigation&＃39;;

import ChatScreen from &＃39;./ChatScreen&＃39;;

class HomeScreen extends React.Component {

static navigationOptions &＃61; {

title: &＃39;Welcome&＃39;,

//设置标题内容 };

render() {

const {

navigate

} &＃61; this.props.navigation;

return ( Hello, Navigation !

onPress&＃61;{() &＃61;> navigate(&＃39;Chat&＃39;,{user:&＃39;Lucy&＃39;})}

title&＃61;"Chat with Lucy"/ >

);

}

}

const SimpleApp &＃61; StackNavigator(

{

Home: {screen: HomeScreen},

Chat:{screen:ChatScreen},

}

);

export default SimpleApp;

ChatScreen.js:

/**

* Created by Administrator on 2017/3/31 0031.

*/

&＃39;use strict&＃39;

import React,{Component}from &＃39;react&＃39;;

import {View,Text}from &＃39;react-native&＃39;;

class ChatScreen extends Component {

static navigationOptions &＃61; {

title: ({state}) &＃61; >&＃96;Chat with $ {state.params.user}&＃96;

};

render() {

const {params} &＃61; this.props.navigation.state;

return ( Chat with {

params.user

} );

}

}

export default ChatScreen;

效果2&＃xff1a;

/** * Created by Administrator on 2017/3/31 0031. */

&＃39;use strict&＃39;

import React, { Component}from &＃39;react&＃39;;

import {View, Text, Button}from &＃39;react-native&＃39;;

class ChatScreen extends Component {

static navigationOptions &＃61; {

title: ({

state

}) &＃61;> {

if (state.params.mode &＃61;&＃61;&＃61; &＃39;info&＃39;) {

return &＃96;${state.params.user}&＃39;s Contact Info&＃96;;

}

return &＃96;Chat with ${state.params.user}&＃96;;

},

header: ({state, setParams}) &＃61;> {

// The navigation prop has functions like setParams, goBack, and navigate.

let right &＃61; (

&＃96;${state.params.user}&＃39;s info&＃96;

}

onPress &＃61; {

() &＃61;> setParams({

mode: &＃39;info&＃39;

})

}

/>

);

if (state.params.mode &＃61;&＃61;&＃61; &＃39;info&＃39;) {

right &＃61; (

title&＃61;"Done"

onPress&＃61;{() &＃61;> setParams({ mode: &＃39;none&＃39; })}

/ >

);

}

return {right};

},

};

render() {

const {

params

} &＃61; this.props.navigation.state;

return (

Chat with {params.user}

);

}

}

export default ChatScreen;

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