react-navigation之動態修改title的內容
阿新 • • 發佈:2019-01-29
效果圖:
動態修改title內容:
static navigationOptions = {
title: ({ state }) => `Chat with ${state.params.user}`
};
ps:`Chat with ${state.params.user}` 這裡有個注意的地方,是這個符號·而不是單引號‘
index.android.js:
rootApp.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);
ChatScreen.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;
/** * 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;