我正在尝试学习React Native,目前正在尝试创建列表视图。一切都正常加载,这个问题出现在连续的压力下,我得到以下错误。
我来自网络和Objective-c背景,所以这需要一点时间才能进入。这是我用于屏幕的代码。
import React, { Component } from 'react'
import {
StyleSheet,
Text,
View,
ListView,
TouchableHighlight
} from 'react-native'
export default class FeedView extends Component {
static navigationOptions = {
title: 'Chat with Feed',
};
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};
}
render() {
const { navigate } = this.props.navigation;
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
</View>
);
}
_renderRow( rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void ){
return (
<TouchableHighlight onPress={() => {
this._pressRow(rowID);
highlightRow(sectionID, rowID);
}}>
<View>
<View style={styles.row}>
<Text style={styles.text}>Testing</Text>
</View>
</View>
</TouchableHighlight>
);
}
_pressRow( rowID: number ){
}
}
var styles = StyleSheet.create({
row: {
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
}
});
答案 0 :(得分:7)
如上面的评论中所述,如果您希望在其他方法中访问this
变量,则需要将ES6类方法与this
绑定,因为它们不会自动绑定。
我建议将所有绑定放在构造函数中,因为它被认为是一种很好的做法(减少垃圾收集)并使代码更整洁。有关详细信息,请参阅相关的ESLint page。
constructor(props) {
super(props);
...
this._renderRow = this._renderRow.bind(this);
this._pressRow = this._pressRow.bind(this);
}
然后,您可以在班级中单独使用this._renderRow
,而无需担心绑定。
答案 1 :(得分:1)
问题是this
函数中的renderRow
没有引用context of the React Component
,因此您无法访问_pressRow
函数
您需要绑定renderRow
函数
render() {
const { navigate } = this.props.navigation;
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={() => this._renderRow()}
/>
</View>
);
}