TouchableOpacity onpress无法正常响应本机列表视图

时间:2017-04-05 11:28:09

标签: react-native react-router

我在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", }}/>
        );
    },
});

1 个答案:

答案 0 :(得分:5)

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

此:

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

应该是:

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