如何在反应原生网格图像查看器中传递动态获取的图像数组数据，并在反应原生中使用标题

Posted 2023-02-22

【中文标题】如何在反应原生网格图像查看器中传递动态获取的图像数组数据，并在反应原生中使用标题

【英文标题】：How to pass dynamically fetched image array data in react native grid image viewer with caption in react native

【发布时间】：2021-09-09 09:01:37

【问题描述】：

我正在使用react-native-grid-image-viewer-with-caption 插件来显示点击它转换为滑块的图片库。

下面是相同的代码：

import React,  Component  from 'react';
import useContext, useState, useEffect from 'react';
import 
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
  ImageBackground,
  Platform,
  Linking,Share,
  ActivityIndicator, Button, TextInput, Touchable
 from 'react-native';
import GridImageViewerCaption from 'react-native-grid-image-viewer-with-caption';


const TestScreen = ( route, navigation ) => 
  const [imageList, setImageList] = useState([]);
  
  useEffect(() => 
    fetchimages();
    const gallery = [
        image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 1',
         image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 2',
         image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 3',
         image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 4',
         image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 5',
         image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 6',
         image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 7',
         image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 8'
        
    ];
    
  
  const fetchimages = async () => 
    setImageLoading(true)
    var InsertAPIFETCH = 'https://testapi.com/images';
    var headers = 
      Accept: 'application/json',
      'Content-Type': 'application/json',
    ;
    var Data = 
      id: route.params.id,
    ;
    fetch(InsertAPIFETCH, 
      method: 'POST',
      headers: headers,
      body: JSON.stringify(Data),
    )
      .then(response => response.json())
      .then(responseJson => 
        setImageList(responseJson.imageres);
        
      )
      .catch(error => 
        alert(error);
      );
  
 
  if (isLoading == true) 
    return <LottieView
    source=require('../assets/indicator.json')
    autoPlay
    loop=true
    speed=0.8
    style= justifyContent: "center", flex: 1 
    />
   else 
    return (
      <View style=styles.container>
        <GridImageViewerCaption data=gallery captionColor="#fff" />      
      </View> 
    );
  


export default TestScreen;```

我想将 API JSON 响应传递给画廊函数，实习生将传递给 GridImageViewerCaption。更详细的说明显示在所附图片中。

谁能帮我解决这个问题 参考链接：https://github.com/ansh-099/react-native-grid-image-viewer

提前致谢。

【参考方案1】：

将图库变量设为imageList的默认值，并将imageList用作GridImageViewerCaption中的数据

  const gallery = [
    image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 1',
     image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 2',
     image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 3',
     image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 4',
     image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 5',
     image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 6',
     image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 7',
     image: 'https://via.placeholder.com/300/09f.png', text: 'Caption 8'
];

  const [imageList, setImageList] = useState(gallery);

  <GridImageViewerCaption data=imageList captionColor="#fff" />      

【讨论】：

感谢您的回复，但是如何处理其中的文字（标题）

您可以使用数组映射来处理标题。 const responseJson = ['url1', 'url2', 'url3']; const newImageList = responseJson.map(url => ( image: url, text: 'caption', ));setImageList(newImageList);希望对你有帮助。