Question

我有一个scrollview，其中使用循环生成了多个项目。我在这些项目上方添加了TouchableOpacity，因为我希望这些对象是可触摸的。但是，当我在onPress方法上添加方法时，它显示错误 not a function，是未定义的

列表数据组件：

class List_Data extends React.Component {

    fetchData = () => {
        console.log("DONE");
    }

    _renderView = () => {
        return (
            <View style={{flex:1, padding: 20}}>
                        <View style={styles.container}>
                            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} >
                                {
                                    this.state.Data.map(function (data, index) {
                                        return (
                                            <TouchableOpacity key={index} onPress={() => this.fetchData()}>
                                                <Image source={{uri: data.imageSrc}}
                                                       resizeMode={'cover'}
                                                       style={{width: '100%', height: imageHeight}}
                                                />
                                            </TouchableOpacity>
                                        );
                                    })
                                }
                            </ScrollView>
                        </View>
                    </View>
        )
    }


    render() {
        return (
            {this._renderView()}
        );
    }
}

我不知道问题是什么，它只是在控制台上打印的一种方法。

Answer 1

问题来自您的.map。基本上，由于不使用箭头功能，因此丢失了this的值。如果您将.map(function(data, index)更改为.map((data,index) =>，则应该可以使用。

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, TouchableOpacity, Image } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {

  state = {
    Data: [
      {imageSrc :'https://randomuser.me/api/portraits/men/39.jpg'},
      {imageSrc: 'https://randomuser.me/api/portraits/women/38.jpg'},
      {imageSrc: 'https://randomuser.me/api/portraits/men/37.jpg'},
      {imageSrc: 'https://randomuser.me/api/portraits/women/36.jpg'},
      {imageSrc: 'https://randomuser.me/api/portraits/men/35.jpg'},
      {imageSrc: 'https://randomuser.me/api/portraits/women/34.jpg'},
    ]
  }

  // let's pass something so that we know that it is working
  fetchData = (index) => {
    alert(`you pressed ${index}`)
  }

  _renderView = () => {
    return (
      <View style={{flex: 1, padding: 20}}>
        <View style={styles.container}>
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} >
            {
              this.state.Data.map((data, index) =>  { // change this to an arrow function
                  return (
                      <TouchableOpacity key={index} onPress={() => this.fetchData(index)}> 
                          <Image source={{uri: data.imageSrc}} 
                                  resizeMode={'cover'}
                                  style={{width: 100, height: 100}}
                          />
                      </TouchableOpacity>
                  );
              })
            }
          </ScrollView>
        </View>
      </View>
    );
  }

  render() {
    return (
      this._renderView()
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

您可以看到它在以下小吃https://snack.expo.io/@andypandy/map-with-arrow-function

中起作用

Answer 2

在ScrollView下尝试keyboardShouldPersistTaps = {true}。 mean_square_error

反应原生TouchableOpacity OnPress无法与循环配合使用

2 个答案: