将图像URI返回到主反应组件

Question

我将相机添加到已经开发的React Native项目中。我想将imageuri（通过摄像机组件中的takePicture设置）将图像通过用户输入确认到图像组件后的调用组件。

调用组件：

<FAB style={styles.fab} test id="goToCamera" small icon="camera" onPress={() => navigation.navigate("Camera")}></FAB>

相机组件：

import React, { useState, useEffect, useRef, Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Button, Image } from 'react-native';
import { Camera, CameraType } from 'expo-camera';

import { setImageUri, imageUri } from "../screens/ImageValidationScreen";
import colors from "../config/colors";

function CameraScreen({ navigation }) {
    const [hasPermission, setHasPermission] = useState(null);
    const [type, setType] = useState(CameraType.back);
    const [camera, setCamera] = useState(null);
    const [imageUri, setImageUri] = useState(null);
    const [cameraToggle, setCameraToggle] = useState(null);

    useEffect(() => {
      (async () => {
        const { status } = await Camera.requestCameraPermissionsAsync();
        setHasPermission(status === 'granted');
      })();
    }, []);

    const takePicture = async () => {
        if (camera) {
          const data = await camera.takePictureAsync(null);
          console.log(data.uri);
          setImageUri(data.uri);          
        }
    };

    if (hasPermission === null) {
      return <View />;
    }
    if (hasPermission === false) {
      return <Text>No access to camera</Text>;
    }

    
    return (
      <View style={styles.container}>
        <Camera style={styles.camera} type={type} ref={(ref)=> setCamera(ref)}>
            <View style={styles.buttonContainer}>`enter code here`
                <TouchableOpacity 
                    style={styles.captureButton} 
                    onPress={() => {
                        takePicture();
                        navigation.navigate("Image");
                    }}>
                </TouchableOpacity> 
                <TouchableOpacity
                    onPress={() => { setType(type === CameraType.back ? CameraType.front : CameraType.back); }}>
                    <Text style={styles.text}> Flip </Text>
                </TouchableOpacity>
            </View>
        </Camera>
      </View>
    );  
}

图像组件：

import React, { useState, useEffect, useRef, Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Button, Image } from 'react-native';
import { Camera, CameraType } from 'expo-camera';

import imageUri from "../screens/CameraScreen"
import colors from "../config/colors";

function ImageValidationScreen({ navigation }) {
  return (
      <View>
        <TouchableOpacity 
          onPress={() => {
            navigation.navigate("CSS");
          }}>
            <Text style={styles.text}> Done </Text>
        </TouchableOpacity>
        {imageUri && <Image source={{ uri: imageUri }} />}
      </View>
  );  
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text: {
    fontSize: 20,
    color: 'black',
  },
});

export default ImageValidationScreen;

现在，我认为imageuri已正确检索/打印到控制台，但图像组件错误地检索了imageuri。我不确定如何将此值传递给调用组件。 非常感谢您！

Answer 1

最好的方法是将参数传递给图像路由，您可以看到文档在这里。

因此，您可以在navigation.navigate.navigate第二个参数中传递对象：

navigation.navigate("Image", {
 imageUri: imageUri
});

在您的情况下，您必须从takepicture Promise获取图像URL，然后将其传递给导航方法

const takePicture = async () => {
  if (camera) {
    const data = await camera.takePictureAsync(null);
    console.log(data.uri);
    setImageUri(data.uri);
    return data.uri
  }
};

，然后onpress

onPress={() => {
  (async()=>{
    const imageURI = await takePicture();
    navigation.navigate("Image", {imageUri: imageURI});
  })()
}}

访问imageuri在图像组件中的事件，您可以做到这一点：

function ImageValidationScreen({ route, navigation }) {
  const { imageUri } = route.params
  return (
      <View>
        <TouchableOpacity 
          onPress={() => {
            navigation.navigate("CSS");
          }}>
            <Text style={styles.text}> Done </Text>
        </TouchableOpacity>
        {imageUri && <Image source={{ uri: imageUri }} />}
      </View>
  );  
}

另外，只需从中删除从”

尚未测试过，让我知道它是否不起作用。