0

我是初学者react-native，目前正在尝试使用react-native-image-crop-picker. 当我捕获图像时，我可以将路径存储在我的state变量中。但是，当我尝试显示图像时，什么都没有显示：-

index.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;

样式.js

import {StyleSheet} from "react-native";

const styles = StyleSheet.create({
    banner: {backgroundColor: 'white'},
    contentContainerStyle: {flex: 1},
    footer: {position: 'absolute', bottom: 0, backgroundColor: 'white'},
    icon: {justifyContent: 'center'},
    iconStyle: {alignSelf: 'center'},
    description:{marginTop:10, marginHorizontal:10},
    media: {width: "25%", height: 200, borderRadius: 10, margin: 10},
    category: {backgroundColor:'rgb(230,230,230)', marginHorizontal:10, marginVertical:5, borderRadius:10}
});

export {
    styles,
}
4

1 回答 1

-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;
于 2019-12-06T09:03:16.213 回答