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


Posted in Javascript onSeptember 26, 2018

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

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

Javascript 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
React项目动态设置title标题的方法示例
Sep 26 #Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 #Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 #Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 #Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 #Javascript
深入理解react-router 路由的实现原理
Sep 26 #Javascript
node.js使用redis储存session的方法
Sep 26 #Javascript
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php修改时间格式的代码
2011/05/29 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
原生JS实现相邻月份日历
2020/10/13 Javascript
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
个人简历中的自我评价范例
2013/10/29 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
公益活动策划方案
2014/01/09 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
校长寄语大全
2014/04/09 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
教师调动申请报告
2015/05/18 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
css height属性中的calc方法详解
2021/06/03 HTML / CSS