React Native學習筆記之–在LisvView的cell中調用TouchableOpacity的onPress方法時報錯
最近一直在出差中,對于React Native的學習又暫停了一段時間,今天記錄一下自己在LisvView的cell中調用TouchableOpacity的onPress方法時報錯的問題。
錯誤提示(見下圖):該方法不是一個function, 這個有點蒙逼了(明明是function)
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICdzFWRoRXdvN1LclHdpZXYyd2LcBzNvwVZ2x2bzNXak9CX90TQNNkRrFlQKBTSvwFbslmZvwFMwQzLcVmepNHdu9mZvwFVywUNMZTY18CX052bm9CX9klaNlXR65kMBRVTy8mMkZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zMwgDMzgjMxIjNyITM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
解決辦法:在ListView的renderRow方法中綁定this
renderRow={this.renderRow.bind(this)}
部分源碼如下:
render() {
return(
<View style={{flex: 1}}>
<ListView
showsVerticalScrollIndicator={false}
dataSource={this.state.dataSource}
{/*錯誤的代碼:renderRow={this.renderRow}*/}
renderRow={this.renderRow.bind(this)}
renderHeader={this.renderHeader}
></ListView>
</View>
);
}
renderRow(rowData) {
return(
<TouchableOpacity
activeOpacity={0.5}
onPress={()=>{this.showNewsDetailView()}}
>
<View style={styles.newsRowStyle}>
<Image source={{uri: rowData.imgsrc}} style={styles.newsImageStyles}></Image>
<View style={styles.contentStyles}>
<Text style={styles.newsTitleStyles}>{rowData.title}</Text>
</View>
</View>
</TouchableOpacity>
);
}
renderHeader() {
return(
<AdvScrollView></AdvScrollView>
);
}
showNewsDetailView() {
console.log('點選cell')
}