child 的 React Native FlatList onPress
React Native FlatList onPress for child
我正在尝试为嵌套在 React Native FlatList 中的图像连接一个新闻处理程序。我已经通过直接在我的组件内部调用该函数来验证该函数是通过 props 传入的,并且工作正常。下面是一个简化的测试用例。我也试过在图像上设置 onPress,结果相同。
const PostList = ({posts, onActLike, currentUser}) => {
return (
<FlatList
data={ posts }
keyExtractor={ (item) => item.id }
renderItem={ ({item}) => {
return (
<View>
<Image
source={ {uri: item.media.url} }
resizeMode="cover"
/>
<View>
<View
onPress={ (item) => {
onActLike(item);
} }
>
{
currentUser.likedMedia.indexOf(item.id) > -1 &&
<Image
source={ require('../assets/images/like_filled.png') }
style={ {width: 20, height: 17} }
resizeMode='contain'
/>
}
{
currentUser.likedMedia.indexOf(item.id) === -1 &&
<Image
source={ require('../assets/images/like_unfilled.png') }
style={ {width: 20, height: 17} }
resizeMode='contain'
/>
}
</View>
</View>
</View>
)
} }
/>
)
}
View
不接受 onPress
函数,Image
也不接受。您需要将 View 包裹在 Touchable 中(TouchableOpacity、TouchableHighlight 等)
我正在尝试为嵌套在 React Native FlatList 中的图像连接一个新闻处理程序。我已经通过直接在我的组件内部调用该函数来验证该函数是通过 props 传入的,并且工作正常。下面是一个简化的测试用例。我也试过在图像上设置 onPress,结果相同。
const PostList = ({posts, onActLike, currentUser}) => {
return (
<FlatList
data={ posts }
keyExtractor={ (item) => item.id }
renderItem={ ({item}) => {
return (
<View>
<Image
source={ {uri: item.media.url} }
resizeMode="cover"
/>
<View>
<View
onPress={ (item) => {
onActLike(item);
} }
>
{
currentUser.likedMedia.indexOf(item.id) > -1 &&
<Image
source={ require('../assets/images/like_filled.png') }
style={ {width: 20, height: 17} }
resizeMode='contain'
/>
}
{
currentUser.likedMedia.indexOf(item.id) === -1 &&
<Image
source={ require('../assets/images/like_unfilled.png') }
style={ {width: 20, height: 17} }
resizeMode='contain'
/>
}
</View>
</View>
</View>
)
} }
/>
)
}
View
不接受 onPress
函数,Image
也不接受。您需要将 View 包裹在 Touchable 中(TouchableOpacity、TouchableHighlight 等)