I'm trying to use NavigatorIOS
so in my index.ios.js
I got:
'use strict';
var React = require('react-native');
var Home = require('./App/Components/Home');
var {
AppRegistry,
StyleSheet,
NavigatorIOS
} = React;
var styles = StyleSheet.create({
container:{
flex: 1,
backgroundColor: '#111111'
}
});
class ExampleApp extends React.Component{
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'example',
component: Home
}} />
);
}
};
AppRegistry.registerComponent('exampleapp', () => ExampleApp);
module.exports = ExampleApp;
And then in the Home.js
:
'use strict';
var React = require('react-native');
var Park = require('./Park');
var {
View,
StyleSheet,
Text,
TouchableHighlight
} = React;
var styles = StyleSheet.create({
...
});
class Home extends React.Component{
onPress() {
this.props.navigator.push({
title: 'Routed!',
component: Park
});
}
render() {
return (
<View style={styles.mainContainer}>
<Text> Testing React Native </Text>
<TouchableHighlight onPress={this.onPress} style={styles.button}>
<Text>Welcome to the NavigatorIOS . Press here!</Text>
</TouchableHighlight>
</View>
);
}
};
module.exports = Home;
The issue I have is that when I click on the TouchableHighlight
triggering onPress()
, I am getting an error:
"Error: undefined is not an object (evaluating 'this.props.navigator')
So it seems that it can't find the navigator
from props but the navigator should be passed by NavigatorIOS
?
Also it seems that the Home
Component has this.props.navigator
as per image:
Any hints?
I found a couple of links (people having exactly the same problem but that didn't help):
Since you're using ES6 you need to bind 'this'.
For example: onPress={this.onPress.bind(this)}
Edit: Yet another way that I've been using more recently is to use an arrow function on the function itself, since they will automatically bind the outside this
.
onPress = () => {
this.props.navigator.push({
title: 'Routed!',
component: Park
});
};