在屏幕上显示图像之前触发事件？

Question

我正在尝试在屏幕上显示图像之前实施触发事件。下面的代码片段可以正常选择图像并显示在屏幕上。单击 CROP 后，图像显示在屏幕上。但是，在单击 CROP 后，将显示一个自定义事件，如输入字段以获取有关图像的一些信息，之后图像将显示在屏幕上。我怎样才能实现这个功能？


import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';


export default function ImagePickerExample() {
  const [image, setImage] = useState(null);
  
  useEffect(() => {
    (async () => {
      if (Platform.OS !== 'web') {
        const { status } = await ImagePicker.requestCameraPermissionsAsync();
        await Alert.alert("Hello")
        if (status !== 'granted') {
          alert('Sorry, we need camera roll permissions to make this work!');
        }
      }
    })();
  }, []);
  
  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      quality: 1,
    });
    
    console.log(result);
    
    if (!result.cancelled) {
      setImage(result.uri);
    }
  };
  
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}

Answer 1

好的，我已经编辑了您的代码。我添加了一个 Modal ，它将在裁剪图像后打开并允许用户输入有关图像的信息。更多信息写在代码注释中

import React, { useState, useEffect } from "react";
import {
  Button,
  Image,
  View,
  Platform,
  Alert,
  Modal,
  TextInput,
  TouchableOpacity,
  Text,
} from "react-native";
import * as ImagePicker from "expo-image-picker";

export default function ImagePickerExample() {
  const [image, setImage] = useState(null);
  const [modalVisible, setModalVisible] = useState(true); //Controls Modal Visibility
  const [imageReady, setImageReady] = useState(false); //When set to true, The image will be displayed with its information/details
  const [imageInfo, setImageInfo] = useState(""); //Stores information/details about the image

  useEffect(() => {
    (async () => {
      if (Platform.OS !== "web") {
        const { status } = await ImagePicker.requestCameraPermissionsAsync();
        await Alert.alert("Hello");
        if (status !== "granted") {
          alert("Sorry, we need camera roll permissions to make this work!");
        }
      }
    })();
  }, []);

  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      quality: 1,
    });

    console.log(result);

    if (!result.cancelled) {
      setImage(result.uri);
      setModalVisible(true); //Open a modal to a allow users to type in details about the image
    }
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {imageReady && ( //Image will be displayed after the modal is closed
        <Image
          source={{
            uri: image,
          }}
          style={{ width: 200, height: 200, marginTop: 10 }}
        />
      )}
      {imageInfo === "" ? null : <Text>{imageInfo}</Text>}
      <Modal animationType="slide" transparent={true} visible={modalVisible}>
        <View
          style={{
            height: 500,
            width: 500,
            backgroundColor: "white",
            alignItems: "center",
            padding: 20,
            alignSelf: "center",
          }}
        >
          <Image
            source={{
              uri: image,
            }}
            style={{ width: 300, height: 350 }}
          />
          <TextInput
            onChangeText={(text) => {
              setImageInfo(text);
            }}
            value={imageInfo}
            placeholder={"Tell us more about this image"}
            style={{
              marginTop: 10,
              color: "black",
              borderRadius: 10,
              borderColor: "black",
              borderWidth: 1,
              minHeight: 40,
              width: 240,
              padding: 5,
              maxHeight: 100,
            }}
            placeholderTextColor={"black"}
            multiline={true}
          />
          <TouchableOpacity
            style={{
              height: 40,
              width: 100,
              backgroundColor: "red",
              alignSelf: "center",
              justifyContent: "center",
              alignItems: "center",
              marginTop: 10,
            }}
            onPress={() => {
              setImageReady(true); //Allow image to be displayed
              setModalVisible(false); //Close the modal
            }}
          >
            <Text>Done</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
}

Answer 2

我还修改了@Proff Mushiana Mulweli 的回答，它按照我想要的方式正常工作，它会先显示输入，然后显示图像。

import React, { useState, useEffect } from "react";
import {Button, Image, View, Platform, Alert, Modal, TextInput, TouchableOpacity, Text,} from "react-native";
import * as ImagePicker from "expo-image-picker";

export default function App() {
  const [image, setImage] = useState(null);
  const [modalVisible, setModalVisible] = useState(true); //Controls Modal Visibility
  const [imageReady, setImageReady] = useState(false); //When set to true, The image will be displayed with its information/details
  const [imageInfo, setImageInfo] = useState(""); //Stores information/details about the image
  
  useEffect(() => {
    (async () => {
      if (Platform.OS !== "web") {
        const { status } = await ImagePicker.requestCameraPermissionsAsync();
        if (status !== "granted") {
          alert("Sorry, we need camera roll permissions to make this work!");
        }
      }
    })();
  }, []);
  
  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      quality: 1,
    });
    
    console.log(result);
    
    if (!result.cancelled) {
      setImageReady(true);
      setModalVisible(true); //Open a modal to a allow users to type in details about the image
      setImage(result.uri);
    }
  };
  
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {imageReady && ( //Image will be displayed after the modal is closed
        <Modal animationType="slide" transparent={true} visible={modalVisible}>
          <View
            style={{
              height: 500,
              width: 500,
              backgroundColor: "white",
              alignItems: "center",
              padding: 20,
              alignSelf: "center",
            }}
          >
            <TextInput
              onChangeText={(text) => {
                setImageInfo(text);
              }}
              value={imageInfo}
              placeholder={"Tell us more about this image"}
              style={{
                marginTop: 10,
                color: "black",
                borderRadius: 10,
                borderColor: "black",
                borderWidth: 1,
                minHeight: 40,
                width: 240,
                padding: 5,
                maxHeight: 100,
              }}
              placeholderTextColor={"black"}
              multiline={true}
            />
            <TouchableOpacity
              style={{
                height: 40,
                width: 100,
                backgroundColor: "red",
                alignSelf: "center",
                justifyContent: "center",
                alignItems: "center",
                marginTop: 10,
              }}
              onPress={() => {
                setModalVisible(false); //Close the modal
                setImageReady(true); //Allow image to be displayed
          
              }}
            >
              <Text>Done</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      )}
      {imageReady && ( //Image will be displayed after the modal is closed
        <Image
          source={{
            uri: image,
          }}
          style={{ width: 200, height: 200, marginTop: 10 }}
        />
      )}
      {imageInfo === "" ? null : <Text>{imageInfo}</Text>}
    </View>
  );
}

在屏幕上显示图像之前触发事件？

Trigger an event before the image shown on the screen?

reactjs

react-native

expo

react-native-image-picker