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) =>
。您的问题是 this
的上下文不是您所期望的。当您使用箭头函数时,this
的上下文是词法范围的。
还是同样的问题...
你试过this.fetchData.bind(this)
吗?
【参考方案1】:
在 ScrollView 下尝试 keyboardShouldPersistTaps=true。 <ScrollView keyboardShouldPersistTaps=true>
【讨论】:
【参考方案2】:问题来自您的.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看到它的工作原理
【讨论】:
以上是关于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 创建新项目