react-native - 如何在卡片上添加 onPress 事件(在 native 基础上)？-6ren

react-native - 如何在卡片上添加 onPress 事件(在 native 基础上)？

转载作者：行者123 更新时间：2023-12-04 05:11:04

26

4

我正在尝试使这些卡片可点击以重定向到另一个屏幕，但我无法弄清楚

 let cards = this.state.items.map(item => (
            <Card key={item.id} onPress={() => Actions.dogScreen()}> 
                <CardItem bordered>
                    <Left>
                        <Thumbnail square source={item.image ? { uri: "data:image/jpeg;base64," + item.image } : logo} />
                        <Body>
                            <Text>Name: {item.name}, Age: {item.age}</Text>
                            <Text note>Gender: {item.gender.name} Race: {item.race.name}</Text>
                        </Body>
                    </Left>
                </CardItem>
            </Card>))

最佳答案

您可以制作 <Card />可通过将整张卡片包裹在 TouchableOpacity 来点击.另外不要忘记添加pointerEvents="none"每张卡。

import { TouchableOpacity } from 'react-native';

let cards = this.state.items.map(item => (
     <TouchableOpacity key={item.id} onPress={() => Actions.dogScreen()}>         

          <Card pointerEvents="none"> 
                <CardItem bordered>
                    <Left>
                        <Thumbnail square source={item.image ? { uri: "data:image/jpeg;base64," + item.image } : logo} />
                        <Body>
                            <Text>Name: {item.name}, Age: {item.age}</Text>
                            <Text note>Gender: {item.gender.name} Race: {item.race.name}</Text>
                        </Body>
                    </Left>
                </CardItem>
            </Card>

       </TouchableOpacity>
))

关于react-native - 如何在卡片上添加 onPress 事件(在 native 基础上)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47362032/

26

4

0

文章推荐： .net - GC.Collect仅在第2代和大对象堆上

文章推荐： autocomplete - 如何 "copy"对 zsh 中其他命令的现有完成

openjdk docker 基础上 .deb 文件的 Java 依赖失败
我一直在从事一个开源项目。它使用安装在 jdk8 镜像上的构建生成的 debian (.deb) 软件包创建 docker 镜像。但最近我开始犯错误，不幸的是我无法克服它。一旦通过 Dockerfi
react-native - 如何在卡片上添加 onPress 事件(在 native 基础上)？
我正在尝试使这些卡片可点击以重定向到另一个屏幕，但我无法弄清楚 let cards = this.state.items.map(item => ( Actions.dog

首页

博学

6Ren·AI

商城

react-native - 如何在卡片上添加 onPress 事件(在 native 基础上)？