天天看點

React Native學習筆記之--在LisvView的cell中調用TouchableOpacity的onPress方法時報錯React Native學習筆記之–在LisvView的cell中調用TouchableOpacity的onPress方法時報錯

React Native學習筆記之–在LisvView的cell中調用TouchableOpacity的onPress方法時報錯

最近一直在出差中,對于React Native的學習又暫停了一段時間,今天記錄一下自己在LisvView的cell中調用TouchableOpacity的onPress方法時報錯的問題。
           

錯誤提示(見下圖):該方法不是一個function, 這個有點蒙逼了(明明是function)

React Native學習筆記之--在LisvView的cell中調用TouchableOpacity的onPress方法時報錯React Native學習筆記之–在LisvView的cell中調用TouchableOpacity的onPress方法時報錯

解決辦法:在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')
    }
           

繼續閱讀