如何在刷卡时从react native牌组刷卡器获取数据

Question

我正在使用react native甲板滑动器来显示数据数组。

//数据阵列

const docs = shuffleArray([
{
title: "Austin Wade",
content: 22,
featured_image: require("../../assets/images/beach.jpeg"),
created_at: "2020-11-11T16:26:13.000000Z",
news_url: "https://www.google.com",
key: "caseex6qfO4TPMYyhorner",
},..... more json arrays...])

我的问题是，当向左刷卡时，我希望能够提取news_url，并使用提取的url打开expo-inapp浏览器，该浏览器将显示网页，例如www.google.com

我已经编写了一个打开网络浏览器的函数。

请有人帮我

//滑动

<SafeAreaView style={{ flex: 1 }}>
{/* <View style={{ flex: 1, padding: 16 }}> */}
<Swiper
ref={useSwiper}
cards={docs}
cardIndex={0}
backgroundColor="transparent"
stackSize={2}
showSecondCard
cardHorizontalMargin={0}
animateCardOpacity
disableBottomSwipe
renderCard={
((card) => <Cardz card={card} />)
}
onSwiped={(cardIndex) => {
console.log(cardIndex);
}}
onSwipedAll={() => {
console.log("onSwipedAll");
}}
onSwipedTop={() => {
console.log(getLatestNews);
}}
onSwipedBottom={() => {
// <Toast message={success} onDismiss={() => {}} />
}}
//swipping left, opens expo web browser
onSwipedLeft={() => {
_handleWebBrowserAsync(getNewsUrl);
//Alert.alert();
}}
></Swiper>
{/* </View> */}
</SafeAreaView>
);

//网络浏览器//异步功能打开应用程序inapp网页浏览器

const _handleWebBrowserAsync = async (url) => {
try {
_addLinkingListener();
await WebBrowser.openBrowserAsync(url);
//only calls this method in IOS Devices as it only
//works for IOS Devices
if (Constants.platform.ios) {
_removeLinkingListener();
}
} catch (error) {
Alert.alert("Error:", error.message);;
console.log("Error:" + error.message);
}
};

//卡片组件

import React from 'react'
import { View, Text, Image, ImageSourcePropType } from 'react-native'
import styles from './Card.styles'
const Cardz = ({ card }) => (
<View activeOpacity={1} style={styles.card}>
<Image
style={styles.image}
source={card.featured_image}
resizeMode="cover"
/>
<View style={styles.photoDescriptionContainer}>
<Text style={styles.text}>{`${card.title}, ${card.content}`}</Text>
</View>
</View>
);
export default Cardz

Answer 1

存在事件回调。

例如：有一个onSwiped道具是

刷卡时要调用的函数。它接收刷卡索引。

因此，您将获得用于从docs数组中获取对象的索引值。如果滑动的索引是2，您可以得到这样的对象：docs[2]。