react-navigation之動態(tài)修改title的內容

更新時間：2018年09月26日 13:45:04 作者：別說你還沒有盡力

這篇文章主要介紹了react-navigation之動態(tài)修改title的內容，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了react-navigation之動態(tài)修改title的內容，分享給大家，具體如下：

效果圖：

動態(tài)修改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;

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: