React Native Navigator set title dynamically iOS - ios

Question

var MainPage = React.createClass({
onPress() {
this.props.navigator.push({
title: 'Home Page',
component: Homepage
});
},
render() {
return (
<View style={[styles.scene, {backgroundColor: '#DAF6FF'}]}>
<TouchableHighlight
style={styles.menubutton}
onPress={this.onPress}>
<Text style={styles.white}>This page</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.menubutton}
onPress={this.onPress}>
<Text style={styles.white}>That page</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.menubutton}
onPress={this.onPress}>
<Text style={styles.white}>Another page</Text>
</TouchableHighlight>
</View>
);
}
});
How can I send a variable with this.onPress to set the navigator title dynamically? ie if I press 'This page' it would set the title to 'This page' in the onPress function. Also it would be useful to set the component dynamically.
Other than creating separate functions for every menu item there doesn't seem to be any obvious way to achieve this. I've tried various things and searched to no avail.

Answer 1

You can pass the title as a paramater to the function:
<TouchableHighlight
style={styles.menubutton}
onPress={ () => this.onPress('Another page') }>
<Text style={styles.white}>Another page</Text>
</TouchableHighlight>
Then, assign it in the navigator function:
onPress(title) {
this.props.navigator.push({
title: title,
component: Homepage
});
}
If you wanted to dynamically set the component, you could take it one step further and use a switch statement:
onPress(title) {
switch(title) {
case 'Another page':
var component = AnotherPage;
break;
}
this.props.navigator.push({
title: title,
component: component
});
}