react-navigation之動態修改title的內容

效果圖：

前端精品教程：百度網盤下載

動態修改title內容：

?

1 2 3

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

ps:`Chat with ${state.params.user}` 這裏有個注意的地方，是這個符號·而不是單引號‘

前端精品教程：百度網盤下載

index.android.js

?

1 2 3 4 5 6 7 8 9 10

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

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

前端精品教程：百度網盤下載

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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