[英]Error: Cannot read property 'push' of undefined React Native
I'm currently trying to learn React Native based on this Tutorial: http://www.appcoda.com/react-native-introduction/ 我目前正在尝试基于此教程学习React Native: http : //www.appcoda.com/react-native-introduction/
While copying most of the Code (small changes in text) I got this error: 复制大部分代码(文本中的小变化)时,我收到此错误:
Error: Cannot read property 'push' of undefined
This error occurs if I try to push a new Navigator View. 如果我尝试推送新的导航器视图,则会发生此错误。 Here is the striped down code (full code at the end but thought it's more readable to have just a short version here): 这是条纹下来的代码(最后的完整代码,但认为这里只有一个简短版本更具可读性):
<TouchableHighlight onPress={() => this._rowPressed(eve)} >
_rowPressed(eve) {
this.props.navigator.push({
title: "Property",
component: SingleEvent,
passProps: {eve}
});
}
Maybe somebody can explain me why the this.props.navigator is undefined and how I can use it. 也许有人可以解释一下为什么this.props.navigator未定义以及如何使用它。 I'm sorry for this basic question but I searched a lot and couldn't find a answer to this problem yet. 我很抱歉这个基本问题,但我搜索了很多,但还没找到这个问题的答案。 I tryed to .bind(this) to the _rowPressed function and also rewrote everything to a NavigatorIOS View but nothing worked yet. 我尝试将.bind(this)添加到_rowPressed函数,并将所有内容重写为NavigatorIOS视图,但还没有任何工作。
Would be nice if somebody could explain it to me. 如果有人可以向我解释,那会很好。
All the best Daniel 所有最好的丹尼尔
Full Error report: 完整错误报告:
Error: Cannot read property 'push' of undefined
stack:
Dates._rowPressed index.ios.bundle:52051
Object._createClass.value.React.createElement.onPress index.ios.bundle:52033
React.createClass.touchableHandlePress index.ios.bundle:41620
TouchableMixin._performSideEffectsForTransition index.ios.bundle:39722
TouchableMixin._receiveSignal index.ios.bundle:39640
TouchableMixin.touchableHandleResponderRelease index.ios.bundle:39443
executeDispatch index.ios.bundle:15431
forEachEventDispatch index.ios.bundle:15419
Object.executeDispatchesInOrder index.ios.bundle:15440
executeDispatchesAndRelease index.ios.bundle:14793
URL: undefined
line: undefined
message: Cannot read property 'push' of undefined
Code Of the Parent View which gets included into the main View via TabBarIOS: 父视图的代码通过TabBarIOS包含在主视图中:
'use strict';
var React = require('react-native');
var singleEvent = require('./singleEvent');
var REQUEST_URL = 'http://***/dates/24-09-2015.json';
var {
Image,
StyleSheet,
Text,
View,
Component,
ListView,
NavigatorIOS,
TouchableHighlight,
TabBarIOS,
ActivityIndicatorIOS
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 10
},
thumbnail: {
width: 53,
height: 81,
marginRight: 10
},
rightContainer: {
flex: 1
},
title: {
fontSize: 16,
marginBottom: 8
},
author: {
color: '#656565',
fontSize: 12
},
separator: {
height: 1,
backgroundColor: '#dddddd'
},
listView: {
backgroundColor: '#F5FCFF'
},
loading: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
class Dates extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),
isLoading: false
});
})
.done();
}
render() {
if (this.state.isLoading) {
return this.renderLoadingView();
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderEvent.bind(this)}
style={styles.listView}
/>
);
}
renderLoadingView() {
return (
<View style={styles.loading}>
<ActivityIndicatorIOS size='large'/>
<Text>Loading Events...</Text>
</View>
);
}
renderEvent(eve) {
return (
<TouchableHighlight onPress={() => this._rowPressed(eve).bind(this)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<View style={styles.rightContainer}>
<Text style={styles.title}>{eve.value.name}</Text>
<Text style={styles.author}>{eve.value.location}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
_rowPressed(eve) {
console.log(eve, this.props);
this.props.navigator.push({
title: "Property",
component: SingleEvent,
passProps: {eve}
});
}
}
module.exports = Dates;
Single View which should be included if the ListView was clicked: 如果单击ListView,则应包含单个视图:
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicatorIOS,
Image,
Component
} = React;
var styles = StyleSheet.create({
description: {
fontSize: 16,
backgroundColor: 'white'
},
title : {
fontSize : 22
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
class SingleEvent extends Component {
render() {
var eve = this.props.eve;
var description = (typeof eve.value.description !== 'undefined') ? eve.value.description : '';
return (
<View style={styles.container}>
<Text style={styles.title}>{eve.value.name}</Text>
<Text style={styles.description}>{description}</Text>
</View>
);
}
}
module.exports = SingleEvent;
index.ios.js where all the views get combined: index.ios.js所有视图合并在一起:
'use strict';
var React = require('react-native');
var Dates = require('./Dates');
//var Eventlist = require('./eventlist');
var NearYou = require('./NearYou');
var icons = [];
icons['place'] = require('image!ic_place_18pt');
icons['reorder'] = require('image!ic_reorder_18pt');
icons['grade'] = require('image!ic_grade_18pt');
icons['people'] = require('image!ic_group_18pt');
var {
Image,
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableHighlight,
TabBarIOS,
Component
} = React;
class allNightClub extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'dates'
};
}
render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}>
<TabBarIOS.Item
selected={this.state.selectedTab === 'dates'}
icon={icons['reorder']}
title= 'Events'
onPress={() => {
this.setState({
selectedTab: 'dates'
});
}}>
<Dates navigator={navigator} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'nearyou'}
title= 'Favorites'
icon={icons['grade']}
onPress={() => {
this.setState({
selectedTab: 'nearyou'
});
}}>
<NearYou navigator={navigator} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'nearyou'}
title= 'Near You'
icon={icons['place']}
onPress={() => {
this.setState({
selectedTab: 'nearyou'
});
}}>
<NearYou navigator={navigator} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'nearyou'}
title= 'People'
icon={icons['people']}
onPress={() => {
this.setState({
selectedTab: 'nearyou'
});
}}>
<NearYou navigator={navigator} />
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
AppRegistry.registerComponent('allNightClub', () => allNightClub);
in your index.ios.js you're referencing a navigator here which isn't set at that moment. 在你的index.ios.js中,你引用了一个导航器,此时没有设置。
<Dates navigator={navigator} />
So, as I've understood you have to options to work with NavigatorIOS: 所以,正如我所知,你必须选择使用NavigatorIOS:
1. NavigatorIOS as a child of your Tab 1. NavigatorIOS作为Tab的子项
You need to define a navigator as a child of your TabViewItems which itself loads the appropriate view: 您需要将导航器定义为TabViewItems的子项,它本身会加载相应的视图:
var styles = StyleSheet.create({
container: {
flex: 1,
}
});
<TabBarIOS.Item>
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Dates',
component: Dates,
}}
/>
</TabBarIOS.Item>
2. NavigatorIOS as the root Element 2. NavigatorIOS作为根元素
class allNightClub extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Index',
component: Index
}}
/>
);
}
}
That's the way it's worked for me. 这就是它对我有用的方式。 I put the original code of index.ios.js into Index.js and also did the following changes: 我将index.ios.js的原始代码放入Index.js并进行了以下更改:
Index.js Index.js
<Dates
navigator={this.props.navigator}
/>
Dates.js Dates.js
<TouchableHighlight onPress={() => this._rowPressed(eve)} underlayColor='#dddddd'>
From what I can deduct, your call to this.props.navigator should work, even without the bind-statements. 从我可以推断出,即使没有bind-statements,你对this.props.navigator的调用也应该有效。
My first thoughts would be: is the navigator item passed to your Dates component from its parent? 我的第一个想法是:导航器项目是否从其父项传递给您的日期组件?
return (
<Dates
navigator={navigator}
... />
Probably inside a renderscene function where you render your navigator.. 可能在渲染导航器的渲染器功能中。
What does your output look like from your console statement? 您的控制台语句的输出结果如何?
console.log(eve, this.props)
I ran into this issue today, the reason is that you need to call the screen where you're using this.props.navigator.push with the NavigatorIOS component. 我今天遇到了这个问题,原因是你需要使用NavigatorIOS组件调用你正在使用this.props.navigator.push的屏幕。 That will set the navigator prop. 这将设置导航器道具。 Eg 例如
<NavigatorIOS
style={styles.container}
initialRoute={{
title: '',
component: DemoScreen
}}
/>
Now in your DemoScreen you can use this.props.navigator
. 现在在你的DemoScreen中你可以使用this.props.navigator
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.