Запрашивать использование для маркировки изображения до или после загрузки: REACT NATIVE

Question

В своем собственном родном приложении я использую react-native-image-crop-picker, чтобы пользователь мог загрузить несколько изображений, а затем использовал flatlist для отображения изображений, загруженных пользователем. Для этого предоставляется код:

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

const openCamera = (rateObj) => {        
     ImagePicker.openCamera({
         width: 300,
         height: 400,
         cropping: true,
       }).then(image => {
         onSelectedImage(image);
       });
}

const onSelectedImage = (image) => {
    let newImageList = imageList;
    const source = {uri: iamge.path};
    let imgItem = {
        id: Date.now(),
        url: source,
        content: image.data
    }
    newImageList.push(imgItem);
    setImageList(newImageList);
}
return(

<TouchableOpacity 
    onPress={() => openCamera()}
> 
    <Text>Take a photo</Text>
</TouchableOpacity >
<FlatList 
    data={imageList}
    keyExtractor={(img) => img.id}
    renderItem={({item}) => {
        return(
             <Image style={myStyle} source={item.url} />
        )
    }}
/>
)

Теперь, что я хочу сделать, это в какой-то момент времени, будь то после того, как пользователь загрузил изображение и может увидеть изображение, или когда они принимают изображение, пользователь должен иметь возможность пометить это изображение как хорошее или плохое. Я не уверен, как я должен подходить к этому. И просто чтобы прояснить ситуацию здесь, я не ищу пользователя, который сначала загрузит все изображения, а затем отобразит все изображения ему и будет иметь переключатели или что-то для каждого изображения, чтобы пометить / пометить его. Если другого пути нет, то, я думаю, я буду go опережать этот метод, но если кто-то может помочь мне предложить путь к этому?

Answer 1

Я покажу вам один из моих последних компонентов. Надеюсь, это поможет вам:

import React, {useState, useEffect} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5Pro';
import {
  View,
  Modal,
  ScrollView,
  Image,
  TouchableOpacity,
  Text,
} from 'react-native';
import ActionSheet from 'react-native-action-sheet';
import ImagePicker from 'react-native-image-crop-picker';
import ImageViewer from 'react-native-image-viewing';

const BUTTONS = ['Gallery', 'Camera', 'Cancel'];

export default (props) => {
  let {files, setFiles} = props;
  const [ImageViwerIsVisible, showImageViwer] = useState(false);
  let [viewingIndex, setViewingIndex] = useState(-1);

  useEffect(() => {
    viewingIndex !== -1 && showImageViwer(true);
  }, [viewingIndex]);

  useEffect(() => {
    ImageViwerIsVisible && setViewingIndex(-1);
  }, [ImageViwerIsVisible]);

  const showActionSheet = () =>
    ActionSheet.showActionSheetWithOptions(
      {
        title: 'Choose photo location',
        options: BUTTONS,
        cancelButtonIndex: 2,
        destructiveButtonIndex: 2,
        tintColor: 'blue',
      },
      (buttonIndex) => {
        switch (buttonIndex) {
          case 0:
            return selectFromGallery();
          case 1:
            return selectFromCamera();
          default:
            return 0;
        }
      },
    );

  const selectFromGallery = () =>
    ImagePicker.openPicker({
      multiple: true,
      //cropping: true,
    })
      .then((image) => {
        setFiles([...files, image].flat());
      })
      .catch((e) => {});
  const selectFromCamera = () =>
    ImagePicker.openCamera({
      cropping: true,
      includeExif: true,
    })
      .then((image) => {
        setFiles([...files, image]);
      })
      .catch((e) => {});
  return (
    <>
      <ImageViewer
        images={files.map((f) => ({uri: f.path}))}
        imageIndex={viewingIndex}
        visible={ImageViwerIsVisible}
        onRequestClose={() => showImageViwer(false)}
      />
      <View
        style={{
          flexDirection: 'row',
          flex: 1,
          padding: 10,
          alignItems: 'center',
        }}>
        <TouchableOpacity onPress={() => showActionSheet()}>
          <Icon solid name="camera-retro" size={32} />
        </TouchableOpacity>
        <ScrollView
          style={{flexDirection: 'row-reverse', flex: 1, marginLeft: 5}}
          horizontal>
          {files.map((file, index) => (
            <TouchableOpacity
              key={file.path}
              onPress={() => setViewingIndex(index)}
              onLongPress={() =>
                ImagePicker.cleanSingle(file.path)
                  .then(() =>
                    setFiles(files.filter((f) => f.path !== file.path)),
                  )
                  .catch((e) => {})
              }
              style={{
                marginRight: 5,
                width: 50,
                height: 50,
                borderWidth: 1,
                borderColor: '#000',
                borderRadius: 5,
              }}>
              <Image
                source={{uri: file.path}}
                style={{width: '100%', height: '100%', borderRadius: 5}}
              />
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
    </>
  );
};

Я показываю изображения в горизонтальной прокрутке (вы можете показывать их в избранном). Лучше убирать временные изображения на componentWillUnmount, я забыл.