【ReactNative】undefined is not an object(evaluating 'this.props.navigator')
2016-06-15 17:28
609 查看
使用ReactNative 用NavigatorIOS做跳转时,遇到报错:
undefined is not an object(evaluating 'this.props.navigator')
代码如下:
/**
* 003.网易新闻
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
NavigatorIOS,
ScrollView,
Text,
} from 'react-native';
// 游轮列表
class List extends React.Component {
render() {
return (
<ScrollView style={styles.flex}>
<Text style={styles.list_item} onPress={this.goTo.bind(this)}>✨ 豪华游轮济州岛</Text>
<Text style={styles.list_item} onPress={this.goTo.bind(this)}>✨ 豪华游轮太平岛</Text>
<Text style={styles.list_item} onPress={this.goTo.bind(this)}>✨ 豪华游轮钓鱼岛</Text>
</ScrollView>
);
}
goTo() {
this.props.navigator.push({
component: Detail,
title: '游轮详情',
rightButtonTitle: '购物车',
onRightButtonPress: function() {
alert('进入购物车!');
}
});
}
}
// 游轮详细信息
class Detail extends React.Component {
render() {
return (
<ScrollView>
<Text style={styles.detail_text}>详情页面</Text>
<Text style={styles.detail_text}>详情信息介绍</Text>
</ScrollView>
);
}
}
class App extends React.Component {
render() {
return (
<NavigatorIOS
style={styles.flex}
initialRoute={{
component: List,
title: '游轮',
passProps: {},
}}
>
</NavigatorIOS>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1,
},
list_item: {
fontSize: 16,
color: 'red',
},
detail_text: {
fontSize: 18,
color: 'blue',
}
});
AppRegistry.registerComponent('AwesomeProject', () => App);
解决办法:把
onPress={this.goTo}换成
onPress={this.goTo.bind(this)}即可
参考链接:http://stackoverflow.com/questions/30079640/undefined-is-not-an-object-evaluating-this-props-navigator-push
undefined is not an object(evaluating 'this.props.navigator')
代码如下:
/**
* 003.网易新闻
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
NavigatorIOS,
ScrollView,
Text,
} from 'react-native';
// 游轮列表
class List extends React.Component {
render() {
return (
<ScrollView style={styles.flex}>
<Text style={styles.list_item} onPress={this.goTo.bind(this)}>✨ 豪华游轮济州岛</Text>
<Text style={styles.list_item} onPress={this.goTo.bind(this)}>✨ 豪华游轮太平岛</Text>
<Text style={styles.list_item} onPress={this.goTo.bind(this)}>✨ 豪华游轮钓鱼岛</Text>
</ScrollView>
);
}
goTo() {
this.props.navigator.push({
component: Detail,
title: '游轮详情',
rightButtonTitle: '购物车',
onRightButtonPress: function() {
alert('进入购物车!');
}
});
}
}
// 游轮详细信息
class Detail extends React.Component {
render() {
return (
<ScrollView>
<Text style={styles.detail_text}>详情页面</Text>
<Text style={styles.detail_text}>详情信息介绍</Text>
</ScrollView>
);
}
}
class App extends React.Component {
render() {
return (
<NavigatorIOS
style={styles.flex}
initialRoute={{
component: List,
title: '游轮',
passProps: {},
}}
>
</NavigatorIOS>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1,
},
list_item: {
fontSize: 16,
color: 'red',
},
detail_text: {
fontSize: 18,
color: 'blue',
}
});
AppRegistry.registerComponent('AwesomeProject', () => App);
解决办法:把
onPress={this.goTo}换成
onPress={this.goTo.bind(this)}即可
参考链接:http://stackoverflow.com/questions/30079640/undefined-is-not-an-object-evaluating-this-props-navigator-push
相关文章推荐
- 如何使用 bind 设置 DNS 服务器
- Jquery绑定事件(bind和live的区别介绍)
- jQuery实现下滑菜单导航效果代码
- jquery实现的仿天猫侧导航tab切换效果
- jQuery bind事件使用详解
- PHP的栏目导航程序
- jquery实现向下滑出的二级导航下滑菜单效果
- 基于jQuery实现以手风琴方式展开和折叠导航菜单
- javascript中apply、call和bind的使用区别
- javascript中call apply 与 bind方法详解
- Asp.net中的数据绑定Eval和Bind应用示例
- jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
- JS+CSS实现六级网站导航主菜单效果
- JS实现网页顶部向下滑出的全国城市切换导航效果
- 浅谈javascript中的call、apply、bind
- 原生js和jquery分别实现横向导航菜单效果
- 使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
- js实现显示当前状态的导航效果代码
- javascript实现当前页导航激活的方法
- JS+CSS实现的日本门户网站经典选项卡导航效果