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 Memoization 让函数也有记忆功能
Oct 27 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
JS实现公告上线滚动效果
Jan 10 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创建桌面快捷方式的实例代码
2014/02/17 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Python中Selenium模块的使用详解
2020/10/09 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
深圳茁壮笔试题
2015/05/28 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
农村婚礼证婚词
2014/01/10 职场文书
工商管理自荐书
2014/07/06 职场文书
加薪通知
2015/04/25 职场文书
利用python做数据拟合详情
2021/11/17 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android