react-native-android - 使用本机反应拍摄图像后如何显示图像？

Question

我是 react native 的初学者。我想从 android 模拟器相机中拍摄一张照片，并使用 react native 在另一个界面中显示这张照片。

我访问相机并拍照但无法显示，有人可以帮我在另一个界面中显示照片吗？以下是我访问相机的代码：

import React,{useState} from 'react';
import { 
    View, 
    Text, 
    StyleSheet,
    Dimensions,
    Image,
    TouchableOpacity,
    Button
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Icon from 'react-native-vector-icons/FontAwesome';
import {launchCamera} from 'react-native-image-picker';

const DashboardScreen = ({navigation}) => {
    
    var [fileUri, SetFileuri] = useState();
    const openPicker = () => {
      let options = {
        title: 'Pick an image',
        storageOptions: {
          skipBackup: true,
          path: 'images',
        },
      };
        launchCamera(options, (response) => {
        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        } else {
          SetFileuri(response.uri) //update state to update Image
          
          
        }
      });
    };

    return (
      <View style={styles.container}>
          
          <View style={styles.header}>
            
            <Animatable.Image
                animation="bounceIn"
                

            source={require('../assets/2.jpg')}
            style= {styles.logo}
            resizedMode="stretch"
            />
            <Text style={styles.text_header}>Bienvenue Tassadit!</Text>
          </View>
         
          <Animatable.View 
            style={styles.footer}
            animation="fadeInUpBig">
            <Text style ={[styles.title,{textAlign:'center'}]}>Prenez une photo de vos ingrédients!</Text>
            
            <View>
                <Image
                    style={{ height: 20, width: 20}}
                    source={ { uri: fileUri } } 
                />
            </View>
            

                <TouchableOpacity onPress={openPicker}>
                <View>
     
                    <Icon style={styles.Icon} name='camera'size={80} color='#009387' />
                </View>
                

                </TouchableOpacity>
                
            
            {/* <View style={styles.button}>
            <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
                <LinearGradient
                colors = {['#08d4c4','#01ab9d']}
                style={styles.signIn}

                >
                    <Text style={styles.textSign}>Suivant</Text>
                    <MaterialIcons
                    name = "navigate-next"
                    color="#fff"
                    size={20}
                    
                    />
                </LinearGradient>
            </TouchableOpacity>
            </View> */}

          </Animatable.View>
      </View>
      
    
    );
};
const {height} = Dimensions.get("screen");
const height_logo = height * 0.28;


export default DashboardScreen;

标签： react-native-android