滑動時如何從 react native-deck-swiper 獲取數據

Question

我正在使用 React Native Deck Swipper 來顯示 arrays 的數據。

//數據數組

    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

我寫了一個 function 打開一個 web 瀏覽器。

請有人幫助我

//刷卡器

    <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>
  );

//WEB BROSWER //async function 在app web瀏覽器中打開app

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道具，它是一個

function 刷卡時調用。 它接收刷卡索引。

因此，您將獲得該索引值，您將使用該索引值從docs數組中獲取 object。 如果滑動索引為2 ，您可以像這樣獲得 object ： docs[2] 。