无法以本机显示图像

Question

我是#include <iostream> #include <math.h> using namespace std; template <class type> type mini(type a , type b) { type x; x = fmod(a,b); if (x ==0) { cout<<"it is an even"; return x; } else cout<<"it is an odd"; return x; } int main() { cout<<"Enter an integer:"; int a,b; cin>>a>>b; mini <int> (a,b); cout<<"\n"; cout<<"Enter a character:"; char x,y; cin>>x>>y; mini <char> (x,y); cout<<"\n"; cout<<"Enter a floating pointing:"; float c,d; cin>>c>>d; mini <float> (c,d); cout<<"\n"; return 0; } 的初学者，目前正尝试使用react-native捕获和选择图像。捕获图像时，可以将路径存储在react-native-image-crop-picker变量中。但是，当我尝试显示图像时，没有任何显示：-

index.js

state

styles.js

import React, {Component} from 'react';
import axios from "axios";
import {View, StyleSheet, Image, TouchableOpacity, ScrollView} from "react-native";
import {
    Container,
    Textarea,
    Form,
    Footer,
    Grid,
    Col,
    Item,
    Input,
    Label,
    Picker,
    Left,
    Body,
    Right,
    Button, Text, Header
} from 'native-base';
import Icon from 'react-native-vector-icons/Feather';
import ImageCropPicker from 'react-native-image-crop-picker';
import {styles, multiSelect} from "./styles";


class PostCreate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: null,
            description: null,
            media: [],
            mediaType: null,
            inputRows: 20,
            selectedItems: [],
            location: null,
            token: null
        };
    }

    handleCamera() {
        ImageCropPicker.openCamera({cropping: true})
            .then(image => {
                this.setState({
                    media:[...this.state.media, image.path.replace(/^.*[\\\/]/, '')],
                })
        });
        console.log("Camera ", this.state.media)
    };

    handleChoosePhoto = () => {
        ImageCropPicker.openPicker({
            multiple:true
        }).then(images=>{
            this.setState({
                media:[...this.state.media, ...images.map(image => image.path.replace(/^.*[\\\/]/, ''))]
            })
        });
        console.log("Gallery ", this.state.media)
    };


    render() {
        const {media} = this.state;
        return (
            <Container>
                <ScrollView contentContainerStyle={styles.contentContainerStyle}>
                    <Form>

                        {
                            (media.length != 0) && media.map((media, key) => (
                                <Image
                                    key={key}
                                    source={{uri: media.path}}
                                    style={styles.media}
                                />
                            ))
                        }
                    </Form>
                </ScrollView>


                <View>
                    <Footer style={styles.footer}>
                        <Grid>
                            <Col style={styles.icon}>
                                <TouchableOpacity onPress={() => this.handleCamera()}>
                                    <Icon style={styles.iconStyle} size={30} color="#000" name='camera'></Icon>
                                </TouchableOpacity>
                            </Col>
                            <Col style={styles.icon}>
                                <TouchableOpacity onPress={() => this.handleChoosePhoto()}>
                                    <Icon style={styles.iconStyle} size={30} color="#000" name='image'></Icon>
                                </TouchableOpacity>
                            </Col>
                        </Grid>
                    </Footer>
                </View>
            </Container>
        );
    }
}

export default PostCreate;

Answer 1

使用此

import React, {Component} from 'react';
import axios from "axios";
import {View, StyleSheet, Image, TouchableOpacity, ScrollView} from "react-native";
import {
    Container,
    Textarea,
    Form,
    Footer,
    Grid,
    Col,
    Item,
    Input,
    Label,
    Picker,
    Left,
    Body,
    Right,
    Button, Text, Header
} from 'native-base';
import Icon from 'react-native-vector-icons/Feather';
import ImageCropPicker from 'react-native-image-crop-picker';
import {styles, multiSelect} from "./styles";


class PostCreate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: null,
            description: null,
            media: [],
            mediaType: null,
            inputRows: 20,
            selectedItems: [],
            location: null,
            token: null
        };
    }

    handleCamera() {
        ImageCropPicker.openCamera({cropping: true})
            .then(image => {
                this.setState({
                    media:[...this.state.media, image.path.replace(/^.*[\\\/]/, '')],
                })
        });
        console.log("Camera ", this.state.media)
    };

    handleChoosePhoto = () => {
        ImageCropPicker.openPicker({
            multiple:true
        }).then(images=>{
            this.setState({
                media:[...this.state.media, ...images.map(image => image.path.replace(/^.*[\\\/]/, ''))]
            })
        });
        console.log("Gallery ", this.state.media)
    };


    render() {
        return (
            <Container>
                <ScrollView contentContainerStyle={styles.contentContainerStyle}>
                    <Form>

                        {
                            (this.state.media.length != 0) && this.state media.map((this.state.media, key) => (
                                <Image
                                    key={key}
                                    source={{uri: this.state.media}}
                                    style={styles.media}
                                />
                            ))
                        }
                    </Form>
                </ScrollView>


                <View>
                    <Footer style={styles.footer}>
                        <Grid>
                            <Col style={styles.icon}>
                                <TouchableOpacity onPress={() => this.handleCamera()}>
                                    <Icon style={styles.iconStyle} size={30} color="#000" name='camera'></Icon>
                                </TouchableOpacity>
                            </Col>
                            <Col style={styles.icon}>
                                <TouchableOpacity onPress={() => this.handleChoosePhoto()}>
                                    <Icon style={styles.iconStyle} size={30} color="#000" name='image'></Icon>
                                </TouchableOpacity>
                            </Col>
                        </Grid>
                    </Footer>
                </View>
            </Container>
        );
    }
}

export default PostCreate;