React natywnym NavigatorIOS, niezdefiniowane nie jest obiektem (oceny „this.props.navigator.push”)

Question

Próbuję użyć NavigatorIOS więc moim index.ios.js mam:

'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; 

a następnie w 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; 

problem mam to, że po kliknięciu na TouchableHighlight wyzwalanie onPress(), otrzymuję błąd:

"Error: undefined is not an object (evaluating 'this.props.navigator') 

Wygląda na to, że nie można znaleźć navigator z rekwizytów, ale nawigator powinien zostać przekazany przez NavigatorIOS?

Ponadto wydaje się, że Home składnik ma this.props.navigator jak na obrazie:

Wszelkie wskazówki?

znalazłem kilka linków (osób posiadających dokładnie ten sam problem, ale to nie pomogło)

• https://github.com/facebook/react-native/issues/416

• undefined is not an object (evaluating 'this.props.navigator.push')

Answer 1

Skoro jesteś używając ES6, musisz powiązać "to".

Na przykład: onPress={this.onPress.bind(this)}

Edit: Jeszcze innym sposobem, który używam od niedawna jest użycie funkcji strzałki na samej funkcji, ponieważ będą one automatycznie powiązać poza this.

onPress =() => { 
    this.props.navigator.push({ 
    title: 'Routed!', 
    component: Park 
    }); 
}; 

Answer 2

Możesz powiązać z tym funkcję w constructor.

constructor(props) { 
    super(props); 
    this.onPress = this.onPress.bind(this); 
} 

Używaj go wtedy, gdy renderujesz bez wiązania.

render() { 
    return (
     <TouchableHighlight onPress={this.onPress} style={styles.button}> 
      <Text>Welcome to the NavigatorIOS. Press here!</Text> 
     </TouchableHighlight> 
    ); 
} 

Ma to tę zaletę, że można go używać wielokrotnie, a także czyści swoją metodę renderowania.