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实现Windows任务管理器的代码
Mar 27 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
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获取当前时间的毫秒数的方法
2014/01/26 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
用jquery来定位
2007/02/20 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
js给selected添加options的方法
2015/05/06 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
Python读写Excel文件的实例
2013/11/01 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python 下载文件的多种方法汇总
2020/11/17 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
高级Java程序员面试题
2016/06/23 面试题
敬老文明号事迹材料
2014/01/16 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
税务会计岗位职责
2014/02/18 职场文书
劳资协议书范本
2014/04/23 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
深入理解 Golang 的字符串
2022/05/04 Golang