刷卡时如何从 react native-deck-swiper 获取数据

Question

我正在使用 React Native Deck swipper 来显示数据数组。

//数据数组

    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-browser例如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>
  );

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

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

有event callbacks。

例如：有onSwiped prop 这是一个

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

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