React Native TouchableOpacity OnPress 不使用循环

Posted

技术标签:

【中文标题】React Native TouchableOpacity OnPress 不使用循环【英文标题】:React Native TouchableOpacity OnPress not Working with loop 【发布时间】:2019-07-13 22:55:19 【问题描述】:

我有一个滚动视图,其中多个项目是通过循环生成的。我在这些项目上方添加了 TouchableOpacity,因为我希望这些对象是可触摸的。但是当我在 onPress 方法上添加一个方法时,它显示错误 not a function , is undefined

List_Data 组件:

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()
        );
    

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

【问题讨论】:

this.state.Data.map(function (data, index) 更改为 this.state.Data.map((data, index) =&gt; 。您的问题是 this 的上下文不是您所期望的。当您使用箭头函数时,this 的上下文是词法范围的。 还是同样的问题... 你试过this.fetchData.bind(this)吗? 【参考方案1】:

在 ScrollView 下尝试 keyboardShouldPersistTaps=true。 &lt;ScrollView keyboardShouldPersistTaps=true&gt;

【讨论】:

【参考方案2】:

问题来自您的.map。基本上你正在失去this 的价值,因为你没有使用箭头函数。如果您将.map(function(data, index) 更改为.map((data,index) =&gt;,它应该可以工作。

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看到它的工作原理

【讨论】:

以上是关于React Native TouchableOpacity OnPress 不使用循环的主要内容,如果未能解决你的问题,请参考以下文章

react native 增加react-native-camera

更新 react-native-maps 以使用 create-react-native-app

react native 增加react-native-storage

React-Native 和 Expo:create-react-native-app 和 react-native init 之间的区别

什么是 react-native-cli 和 @react-native-community/cli?

React Native - 当 react-native 版本 > 0.55 时,无法通过 react-native-cli 创建新项目