Phản ứng Native, NavigatorIOS, không xác định không phải là một đối tượng (đánh giá 'this.props.navigator.push')

Question

Tôi đang cố gắng sử dụng NavigatorIOS như vậy trong index.ios.js của tôi tôi nhận:

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

Và sau đó trong 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; 

vấn đề là tôi có khi tôi click vào TouchableHighlight kích hoạt onPress(), tôi nhận được một lỗi:

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

Vì vậy, có vẻ như nó không thể tìm thấy các navigator từ đạo cụ nhưng hoa tiêu nên được thông qua bởi NavigatorIOS?

Cũng có vẻ như rằng Component Home có this.props.navigator theo hình ảnh:

Bất kỳ gợi ý?

Tôi tìm thấy một vài liên kết (người có chính xác cùng một vấn đề nhưng điều đó không hiệu quả):

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

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

Answer 1

Vì bạn sử dụng ES6 bạn cần phải liên kết 'this'.

Ví dụ: onPress={this.onPress.bind(this)}

Edit: Tuy nhiên, một cách mà tôi đã sử dụng gần đây hơn là sử dụng một chức năng mũi tên trên chức năng riêng của mình, vì họ sẽ tự động liên kết bên ngoài this.

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

Answer 2

Bạn có thể liên kết hàm này trong constructor.

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

Sau đó, sử dụng khi hiển thị mà không cần ràng buộc.

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

Điều này có lợi thế là có thể được sử dụng nhiều lần và cũng làm sạch phương pháp hiển thị của bạn.