React Native: Impossibile leggere la proprietà 'push' di undefined - Avere NavigatorIOS ed ES6 bind (this)

Question

Sto sviluppando un'applicazione nativa reattiva e sto tentando di indirizzare l'utente alla vista successiva dopo aver effettuato correttamente l'accesso tramite Facebook.

Il problema è che continuo a ricevere un messaggio di errore "Impossibile leggere la proprietà 'push' di undefined." Ho controllato tutte le risposte relative sul forum e mi sono assicurato di includere NavigatorIOS e bind (this) sulla mia chiamata di funzione - quindi quelli sono il problema.

Mi piacerebbe ricevere assistenza nel determinare ciò che è sbagliato, dato che sono uno sviluppatore di novizi.

Ecco l'errore:

Error: Cannot read property 'push' of undefined 
stack: 
    <unknown>            index.ios.bundle:1498 
    MessageQueue.__invokeCallback       index.ios.bundle:7235 
    <unknown>            index.ios.bundle:7151 
    guard             index.ios.bundle:7104 
    <unknown>            index.ios.bundle:7151 
    <unknown>            index.ios.bundle:7148 
    ReactDefaultBatchingStrategyTransaction.Mixin.perform index.ios.bundle:6552 
    Object.ReactDefaultBatchingStrategy.batchedUpdates  index.ios.bundle:15885 
    Object.batchedUpdates         index.ios.bundle:5084 
URL: undefined 
line: undefined 
message: Cannot read property 'push' of undefined 

============================

Ecco il mio codice

'use strict'; 

var React = require('react-native'); 
var Main = require('./App/Components/Main'); 
var Icon = require('./node_modules/react-native-vector-icons/FontAwesome'); 
var FacebookLoginManager = require('NativeModules').FacebookLoginManager; 
var { 
AppRegistry, 
StyleSheet, 
Text, 
View, 
TouchableHighlight, 
NavigatorIOS, 
Navigator, 
} = React; 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    marginTop: 10 
}, 
icon: { 
    fontSize: 20, 
    color: 'white', 
    paddingVertical: 5, 
    paddingHorizontal: 8, 
    borderRadius: 4, 
    backgroundColor: '#3b5998', 
}, 
text: { 
    marginLeft: 10, 
    color: 'white', 
    fontWeight: '600', 
}, 
}); 

class nomsyapp extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     result: 'Find the Foods that Fit Your Lifestyle', 
     loggedIn: false, 
    }; 
    } 

    login() { 
    FacebookLoginManager.newSession((error, info) => { 
     if (error) { 
     this.setState({result: error}); 
     } else { 
     this.setState({result: info}); 
     this.setState({loggedIn: true}); 
     this.props.navigator.push({ 
      component: Main, 
      title: 'Choose Your Lifestyle', 
     }); 
     } 
    }); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <TouchableHighlight onPress={this.login.bind(this)}> 
     <Icon name="facebook" style={styles.icon}> 
      <Text style={styles.text}>Login with Facebook</Text> 
      </Icon> 
     </TouchableHighlight> 
     <Text style={styles.instructions}> 
      {this.state.result} 
     </Text> 
     </View> 
    ); 
    } 
}; 


AppRegistry.registerComponent('nomsyapp',() => nomsyapp); 

============================

Answer 1

Questo è il formato che vi serve per la vostra iniziale percorso:

render: function() { 
    return (
    <NavigatorIOS 
     initialRoute={{ 
     component: nomsyapp, 
     title: 'Nomsyapp', 
     passProps: { /*whatever props you want */ }, 
     }} 
    /> 
); 
} 

Questo esempio si basa su Facebook docs.

Pertanto, è necessario spostare tutto il codice corrente in un altro componente e creare un nuovo componente con la funzione di rendering visualizzata in alto. Quindi il componente nomsyapp avrà la proprietà navigator e sarà possibile navigare tra i percorsi.