TouchableOpacity не отображает изображение - PullRequest
Новая
       45

TouchableOpacity не отображает изображение

0 голосов
/ 27 апреля 2019

У меня есть изображение, вложенное в TouchableOpacity. При нажатии он позволяет мне выбрать изображение (изображение профиля) и затем должен изменить свой значок на выбранное изображение. Когда я загружаю страницу, TouchableOpacity есть, но заполнитель Image не загружается. Когда я нажимаю TouchableOpacity и выбираю изображение, будет показано выбранное изображение .. 

import React, {Component} from 'react'
import {View,Text,Image,Button,ImageBackground,TextInput,TouchableOpacity} from 'react-native'
import styles from "./styles"
import { Provider as PaperProvider } from 'react-native-paper';
var ImagePicker = require('react-native-image-picker');
var RNFS = require('react-native-fs');

class CharacterCreate extends Component{

    constructor() {
        super()
        this.state = {
            name:"",
            class:"",
            skills:[],
            filePath:"@assets/tinycam.jpg",
            skills:[]
        }
    }
    static navigationOptions = {
        header: null
    }


    choosePicture() {
        const options = {
            title: 'Select avatar',
            mediaType: 'photo',
            maxHeight:100,
            maxWidth:100
        }
        ImagePicker.showImagePicker(options, (response) => {
            //console.warn(response)
            if (response.didCancel){

            } else if (response.error) {
                console.warn("Error with this")
            } else {
                let source = response.uri
                //console.warn(source)
                this.setState({
                    filePath: source, 
                })
            }
        })
    }

    processData() {
        //TODO:
        //write to file return to previous page
        var path=RNFS.DocumentDirectoryPath+'/character.json'
        RNFS.writeFile(path,JSON.stringify(this.state),'utf8')
            .then((success) => {
                this.props.navigation.goBack()
            })
            .catch((err) => {
                console.warn(err.message)
            })

    }

    createTable() {
        let table = []
    }

    render() {
        return(
            <PaperProvider>
                <ImageBackground source={require("@assets/background.jpg")} style={styles.backgroundStyle}>
                    <View style={styles.viewTitle}>
                        <TouchableOpacity style={{alignItems:'center',justifyContent:'center'}} onPress={() => this.choosePicture()}>
                            <Image style={{width:75,height:75,resizeMode:'cover'}} source={{uri:this.state.filePath}} ></Image>
                        </TouchableOpacity>
                        <TextInput style={styles.textStyle} placeholder="Name" underlineColorAndroid="black" onChangeText = {() => this.setState({name:text})}></TextInput>
                        <TextInput style={styles.textStyle} placeholder="Class" underlineColorAndroid="black" onChangeText = {() => this.setState({class:text})}></TextInput>
                        <TextInput style={styles.textStyle} placeholder="Add a skill" underlineColorAndroid="black"></TextInput>
                        <Button title="Done" onPress={() => this.processData()}/>
                    </View>
                </ImageBackground>
            </PaperProvider>
        )
    }
}

export default CharacterCreate

1 Ответ

0 голосов
/ 29 апреля 2019

Вам нужно загрузить статическое изображение, используя , требуйте синтаксис , например: 

this.state = {
    filePath: require("@assets/tinycam.jpg")
}

, и для отображения локального файла или сетевого изображения используйте «uri» из prop source : 

let source = response.uri
this.setState({
    filePath: { uri: source} 
})

, так что теперь ваш компонент изображения будет выглядеть так: 

<Image style={{width:75,height:75,resizeMode:'cover'}} source={this.state.filePath} ></Image>

Подробнее об изображениях можно прочитать здесь: https://facebook.github.io/react-native/docs/images

...