返回图像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被正确地检索/打印到控制台，但是被Image组件错误地检索。我不确定如何将此值传递给调用组件。提前谢谢你!!

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文件导出。

还没有测试过这个，让我知道如果它不工作。