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

Question

我在一个已经开发的react本地项目中添加了一个照相机。在用户输入到图像组件后，我希望将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被正确地检索/打印到控制台，但是被图像组件不正确地检索。我不知道如何将这个值传递给调用组件。提前谢谢你！！

Answer 1

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

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

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

在这种情况下，您必须从takePicture承诺获取图像URL，然后将其传递给navigate方法。

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>
  );  
}

另外，只需删除import imageUri from "../screens/CameraScreen"，因为imageUri不是从CameraScreen文件导出的。

虽然还没有测试过，但是如果它不起作用，请告诉我。