我有一个通过API填充为卡的平面列表，需要在每张卡上实现共享按钮，并将相应的数据发送到新屏幕

基本上，我有一个从远程API获得的工作平面列表数据，并以卡片的形式呈现。我在UI中添加了共享按钮，但无法弄清楚，

我如何添加按每张卡，单击时会打开有关该特定卡的更多详细信息或单击共享按钮，我可以共享卡特定数据或复制卡特定数据

<View>
          <FlatList
            data={this.state.dataSource}
            renderItem={({ item }) => <CardBox message={item} />}
            keyExtractor={(item) => item.Id.toString()}
            onEndReached={() => dispatchFetchPage()}
            initialNumToRender={1}
            maxToRenderPerBatch={2}
            onEndReachedThreshold={0.5}
          />
        </View>
<Card>
        <CardItem button >
          <View style={carddesign.card}>
            <View>
              <Text>Quote by : {this.props.message.author}</Text>
            </View>
            <View>
              <Text style={carddesign.cardText}>{this.props.message.quote}</Text>
              <Text style={carddesign.cardSubText}>{this.props.message.genre}</Text>
            </View>
          </View>
        </CardItem>
        <CardItem>
          <Left style={{ flex: 1 }}>
            <Button transparent onPress={ShareQuote}>
              <Icon active name="share" />
              <Text style={{ fontSize: 12 }}>Share</Text>
            </Button>
          </Left>
          <Body style={{ flex: 1 }}>
            <Button transparent>
              <Icon active name="chatbubbles" />
              <Text style={{ fontSize: 12 }}>Copy</Text>
            </Button>
          </Body>
          <Right style={{ flex: 1 }}>
            <Button transparent>
              <Icon active name="download" />
              <Text style={{ fontSize: 12 }}>Download</Text>
            </Button>
          </Right>
        </CardItem>
      </Card>

您可以将卡片组件包装在可触摸不透明度中，如下所示：

<TouchableOpacity onPress={this._onPressButton}> 
     <Card></Card>
 </TouchableOpacity>

希望对您有所帮助。

相关内容

最新更新

热门标签：