React Native: Không thể đọc thuộc tính 'push' của undefined - Có NavigatorIOS và ES6 ràng buộc (điều này)

Question

Tôi đang phát triển ứng dụng gốc phản ứng và tôi đang cố định tuyến người dùng đến chế độ xem tiếp theo sau khi đăng nhập thành công qua Facebook.

Vấn đề là tôi tiếp tục nhận được thông báo lỗi "Không thể đọc thuộc tính 'đẩy' không xác định." Tôi đã kiểm tra tất cả các câu trả lời liên quan trên diễn đàn và tôi đã chắc chắn bao gồm NavigatorIOS và ràng buộc (điều này) vào cuộc gọi chức năng của tôi - vì vậy đó là những vấn đề.

Tôi rất muốn được hỗ trợ trong việc xác định điều gì là sai, vì tôi là một người mới làm quen.

Dưới đây là lỗi:

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 

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

Đây là mã của tôi

'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

Đây là định dạng bạn cần cho ban đầu của bạn tuyến đường:

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

Ví dụ này dựa trên số Facebook docs.

Do đó, bạn nên di chuyển tất cả mã hiện tại của mình vào một thành phần khác và tạo thành phần mới với hàm kết xuất được hiển thị ở trên. Sau đó, thành phần nomsyapp sẽ có thuộc tính navigator và bạn sẽ có thể điều hướng các tuyến đường.