0

我有一个嵌套在 TouchableOpacity 中的图像。按下时，它允许我选择一个图像（个人资料图片），然后它应该将其图标更改为所选图片。当我加载页面时，TouchableOpacity 在那里，但占位符图像没有加载。当我按下 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
4

1 回答 1

0

您需要使用require语法加载静态图像，如下所示：

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

并显示本地文件或网络图像使用道具源的“uri” ：

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

于 2019-04-29T09:44:40.707 回答