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 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
详解webpack运行Babel教程
Jun 13 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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加入ftp扩展的解决方法
2013/02/07 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP反向代理类代码
2014/08/15 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
JS实现小星星特效
2019/12/24 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
详解Python中的__new__()方法的使用
2015/04/09 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
用Python写一个自动木马程序
2019/09/17 Python
使用python绘制温度变化雷达图
2019/10/18 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
运动会开幕式主持词
2014/03/28 职场文书
促销活动总结
2014/04/28 职场文书
大学新生军训方案
2014/05/03 职场文书
销售团队口号大全
2014/06/06 职场文书
2014年接待工作总结
2014/11/26 职场文书
会计工作检讨书
2015/02/19 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
5道关于python基础 while循环练习题
2021/11/27 Python
详解python的异常捕获
2022/03/03 Python