react-navigation之动态修改title的内容
来源:互联网 发布:数据库系统的构成 编辑:程序博客网 时间:2024/04/30 08:17
效果图:
动态修改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);
/** * 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;
0 0
- react-navigation之动态修改title的内容
- 修改navigation Bar 中部的title内容
- android 动态修改menu item的内容title
- react-navigation中修改navigation Options所对应的属性
- iOS开发之navigation bar修改title颜色、字体等
- 关于动态修改react-navigation各种属性方式
- iOS常见问题之动态修改UINavigationController的rightBarButtonItem的title
- React-navigation之StackNavigator
- React-navigation之TabNavigation
- React-navigation之DrawerNavigation
- React Native开发之React Navigation的StackNavigator 详解
- react-navigation的使用
- 动态修改asp.net的title值
- 动态修改js中文字的title
- react-navigation之TabNavigator使用
- React-Navigation之TabNavigator 配置
- React-navigation之StackNavigator_2进阶
- React-navigation之总结_repint
- 初窥Linux 之 我最常用的20条命令
- 欢迎使用CSDN-markdown编辑器
- Java首字母大写
- 在网页上能在线编辑的html标签
- bzoj2434 [Noi2011]阿狸的打字机
- react-navigation之动态修改title的内容
- 基于DirectUI技术开发的发卡系统
- java的TreeMap在ip转区域的使用
- 弹出框页面居中显示的两种方法
- tensorflow center loss代码注释
- 史上最全的CSS hack方式一览
- 初识JHipster
- 接上--根据不同请求路径处理不同响应
- opencv图像阈值设置