React Native学习笔记-2：this.props.navigator undefined

源码如下：

'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
ScrollView,
PixelRatio,
NavigatorIOS,
TextInput,
} from 'react-native';
class HelloWorld extends Component {
render() {
return (
<NavigatorIOS style = {styles.flex} initialRoute = {
{
component: NavigatorRouteView,
title: 'Hi',
passProps: {},
}
} />
);
}
}
class NavigatorRouteView extends Component {
jumpTo() {
// alert(this.props.navigator);**(1)**
// alert(this);
this.props.navigator.push({
component: NavigatorDetailView,
title: 'Detail Info',
rightButtonTitle: 'Shopping',
});
}
render() {
return (
<ScrollView style = {styles.flex}>
<View style = {styles.item}>
<Text style = {styles.list_font} onPress = {this.jumpTo}/*3*/>HelloWorld</Text>
</View>
</ScrollView>
);
}
}
class NavigatorDetailView extends Component {
render() {
return (
<View style = {{flex: 1, backgroundColor: 'red'}}></View>
);
}
}
const styles = StyleSheet.create({
list_font: {
fontSize: 16,
},
item: {
flex: 1,
// borderWidth: 1,
// borderColor: 'blue',
height: 80,
},
flex: {
flex: 1,
},
font: {
fontSize: 20,
color: '#fff',
fontWeight: 'bold',
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

点击界面跳转到下一级界面无反应，放开注释一处的代码：

alert(this.props.navigator);

则给出undefined的错误信息，而打印this.props同样给出undefined错误信息，经查询，错误处在点击方法绑定上：

onPress = {this.jumpTo}

修改为:

onPress = {this.jumpTo.bind(this)}

即可，参考：
“React Native, NavigatorIOS, undefined is not an object (evaluating ‘this.props.navigator.push’)”

最后

以上就是漂亮棒棒糖最近收集整理的关于React Native学习笔记-2：this.props.navigator undefined的全部内容，更多相关React内容请搜索靠谱客的其他文章。