TouchableOpacity onpress无法正常响应本机列表视图(TouchableOpacity onpress not working react native listview)

TouchableOpacity onpress无法正常响应本机列表视图(TouchableOpacity onpress not working react native listview)

我在tabvewAnimated中使用列表视图。 现在我在将onPress（）TouchableOpacity添加到行时遇到问题，每当页面加载时它会自动触发，当我添加this.props.navigator.push（{id：8，}）; 它给我错误“undefined不是对象（评估'this.props.navigator.push'）”我正在使用Navigator并在android上构建应用程序

这是我的代码：

const RecievedPage = React.createClass({ getInitialState() { let dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid}); return { dataSource: dataSource.cloneWithRows(dataList), loader:true, } }, display(rowData){ this.props.navigator.pop(); ToastAndroid.show(rowData+"", ToastAndroid.SHORT); }, componentWillMount() { let self = this; SharedPreferences.getItem("sender_id", (value) => { let user_id = value; let url = BASE_URL; fetch(url, { method: "GET", headers: { "Accept": "application/json", "Content-Type": "application/json", }, }) .then((response) => response.json()) .then((responseData) => { if (responseData.responsecode === 1) { Received = responseData.data; if (Received.length === 0) { ToastAndroid.show("No Data found", ToastAndroid.SHORT); }else{ self.setState({dataSource:this.state.dataSource.cloneWithRows(Received), loader:false}); } } else { ToastAndroid.show('please try again...', ToastAndroid.SHORT); } }) .catch(e => { // ToastAndroid.show('Error:Please try again...', ToastAndroid.SHORT); }) .done(); }); }, renderRow(rowData, sectionID,rowID){ let QrView = (rowData.qrImageUrl!== "")? <TouchableOpacity activeOpacity={.5} onPress={() => this.display(rowData.qrImageUrl)} > <Image source={{uri:rowData.qrImageUrl}} style={{height:40,width:40,margin:15}} resizeMode="contain"/> </TouchableOpacity> : <Text style={{fontSize : 18,marginTop:15,color:"black",margin:15}} >NA</Text>; return <View key={sectionID}> <View style={{ flex: 1,height:70,flexDirection: 'row',justifyContent: 'space-between'}}> <Text style={{fontSize : 18,marginTop:15,color:"black"}} >{rowData.sender_name}</Text> <View> {QrView} </View> </View> </View> }, render() { return( <ListView dataSource={this.state.dataSource} renderRow={this.renderRow} enableEmptySections={true} style={{backgroundColor:"white", }}/> ); }, });

I am using list view inside the tabvewAnimated. Right now I am facing problem while adding the onPress() TouchableOpacity to row where its get automatically triggered whenever page loads andwhen i added this.props.navigator.push({id: 8,}); it giving me error "undefined is not object(evaluating 'this.props.navigator.push')" I am using Navigator and building the app on android

Here is my code:

const RecievedPage = React.createClass({ getInitialState() { let dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid}); return { dataSource: dataSource.cloneWithRows(dataList), loader:true, } }, display(rowData){ this.props.navigator.pop(); ToastAndroid.show(rowData+"", ToastAndroid.SHORT); }, componentWillMount() { let self = this; SharedPreferences.getItem("sender_id", (value) => { let user_id = value; let url = BASE_URL; fetch(url, { method: "GET", headers: { "Accept": "application/json", "Content-Type": "application/json", }, }) .then((response) => response.json()) .then((responseData) => { if (responseData.responsecode === 1) { Received = responseData.data; if (Received.length === 0) { ToastAndroid.show("No Data found", ToastAndroid.SHORT); }else{ self.setState({dataSource:this.state.dataSource.cloneWithRows(Received), loader:false}); } } else { ToastAndroid.show('please try again...', ToastAndroid.SHORT); } }) .catch(e => { // ToastAndroid.show('Error:Please try again...', ToastAndroid.SHORT); }) .done(); }); }, renderRow(rowData, sectionID,rowID){ let QrView = (rowData.qrImageUrl!== "")? <TouchableOpacity activeOpacity={.5} onPress={() => this.display(rowData.qrImageUrl)} > <Image source={{uri:rowData.qrImageUrl}} style={{height:40,width:40,margin:15}} resizeMode="contain"/> </TouchableOpacity> : <Text style={{fontSize : 18,marginTop:15,color:"black",margin:15}} >NA</Text>; return <View key={sectionID}> <View style={{ flex: 1,height:70,flexDirection: 'row',justifyContent: 'space-between'}}> <Text style={{fontSize : 18,marginTop:15,color:"black"}} >{rowData.sender_name}</Text> <View> {QrView} </View> </View> </View> }, render() { return( <ListView dataSource={this.state.dataSource} renderRow={this.renderRow} enableEmptySections={true} style={{backgroundColor:"white", }}/> ); }, });

最满意答案

您正在调用函数而不是传递函数。

这个：

<TouchableOpacity activeOpacity={.5} onPress={this.display(rowData.qrImageUrl)}>

应该：

<TouchableOpacity activeOpacity={.5} onPress={() => this.display(rowData.qrImageUrl)}>

You are calling the function instead of passing a function.

This:

<TouchableOpacity activeOpacity={.5} onPress={this.display(rowData.qrImageUrl)}>

Should be:

<TouchableOpacity activeOpacity={.5} onPress={() => this.display(rowData.qrImageUrl)}>