获取 url React Native 后如何显示图像数组

Question

我试图在挑选后显示所挑选图像的预览，我正在使用这个库import { AssetsSelector } from 'expo-images-picker'; 这是选择图片的代码：

    import React, { useMemo } from 'react';
import { Text, View, StyleSheet, SafeAreaView, Alert } from 'react-native';
import { AssetsSelector } from 'expo-images-picker';
import { Ionicons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { MediaType } from 'expo-media-library';
import { useNavigation } from '@react-navigation/core';

export default function App() {
  const navigation = useNavigation();
  const onSuccess = (data: any) => {        
    const filteredUri = data.filter(({ uri }) => uri).map(({ uri }) => uri);
    navigation.navigate('AddProductScreen', 
    {
      filteredUri: filteredUri,
    });
  };
  
  const widgetErrors = useMemo(
    () => ({
      errorTextColor: 'black',
      errorMessages: {
        hasErrorWithPermissions: 'Please Allow media gallery permissions.',
        hasErrorWithLoading: 'There was error while loading images.',
        hasErrorWithResizing: 'There was error while loading images.',
        hasNoAssets: 'No images found.',
      },
    }),
    []
  );

  const widgetSettings = useMemo(
    () => ({
      getImageMetaData: false, 
      initialLoad: 100,
      assetsType: [MediaType.photo, MediaType.video],
      minSelection: 1,
      maxSelection: 3,
      portraitCols: 4,
      landscapeCols: 4,
    }),
    []
  );

  const widgetResize = useMemo(
    () => ({
      width: 50,
      compress: 0.7,
      base64: false,
      saveTo: 'jpeg',
    }),
    []
  );

  const _textStyle = {
    color: 'white',
  };

  const _buttonStyle = {
    backgroundColor: 'orange',
    borderRadius: 5,
  };

  const widgetNavigator = useMemo(
    () => ({
      Texts: {
        finish: 'finish',
        back: 'back',
        selected: 'selected',
      },
      midTextColor: 'black',
      minSelection: 1,
      buttonTextStyle: _textStyle,
      buttonStyle: _buttonStyle,
      onBack: () => {navigation.goBack()},
      onSuccess: (e: any) => onSuccess(e),
    }),
    []
  );

  const widgetStyles = useMemo(
    () => ({
      margin: 2,
      bgColor: 'white',
      spinnerColor: 'blue',
      widgetWidth: 99,
      videoIcon: {
        Component: Ionicons,
        iconName: 'ios-videocam',
        color: 'tomato',
        size: 20,
      },
      selectedIcon: {
        Component: Ionicons,
        iconName: 'ios-checkmark-circle-outline',
        color: 'white',
        bg: '#0eb14970',
        size: 26,
      },
    }),
    []
  );

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>        
        <View style={styles.container}>
          <AssetsSelector
            Settings={widgetSettings}
            Errors={widgetErrors}
            Styles={widgetStyles}
            Navigator={widgetNavigator}
          />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

这是我想要显示图像的代码，我使用反应导航道具来获取数组：

const showPickedImages = ({ route, navigations }) => {
  const navigation = useNavigation();
  var filteredUri = route.params?.filteredUri;  
   return(
<View>

//Here I want to show the preview of the picked images
<View/>
)}

Answer 1

您可以为此使用 Flatlist 或 ScrollView。

<Flatlist
    ListEmptyComponent={
        <Text>Loading...</Text>} // show loading text until you get the data
    data={filteredUri}
    renderItem={(uri)=>
        <Image source={{uri}} style={{widht:100, height:100}} />
    }
    />