TouchableOpacity不显示图像

Question

我在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

Answer 1

您需要使用加载静态映像，需要使用如下的语法：

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