React-native: Charger dynamiquement des images à partir de l'état

Créé le 30 oct. 2015  ·  3Commentaires  ·  Source: facebook/react-native

Salut tout le monde,

J'ai un problème où j'essaie de changer la source de l'image à partir d'un changement dans l'objet d'état mais cela ne change pas.
J'ai enregistré la valeur et elle change, mais pas l'image.

Voici le code que j'utilise :

render() {
        var images = {
            playcircle: require('image!playcircle'),
            pausecircle: require('image!pausecircle')
        }
        return (
            <View style={[styles.container, {width: this.props.width - 10}]}>
                <TouchableOpacity onPress={this._playAudio.bind(this)}>
                    <Image source={images[this.state.playImage]} style={styles.img} />
                </TouchableOpacity>
                <View style={styles.textWrapper}>
                    <Text style={styles.txt}>{this.props.podTitle}</Text>
                </View>
            </View>
        );
    }
_playAudio() {
        var blockThis = this;
        debugger;
        if (!this.state.isPlaying) {
            JSAudioPlayer.play(this.props.url, true, function(error){
                if (error) {
                    alert(error);
                } else {
                    blockThis.setState({
                        isPlaying: true,
                        playImage: 'pausecircle'
                    })
                }
            });
        } else {
            JSAudioPlayer.pauseCurrent();
            blockThis.setState({
                isPlaying: false,
                playImage: 'playcircle'
            });
        }       
    }

Toute aide serait appréciée.
Merci d'avance

@josev55

Ran Commands Locked

Commentaire le plus utile

J'ai eu quelque chose de similaire il y a quelque temps. Essayez d'ajouter la propriété key à la balise d'image comme <Image key={images[this.state.playImage].uri} ... /> . Cela a fonctionné pour moi dans ce cas https://github.com/facebook/react-native/issues/3471

Tous les 3 commentaires

J'ai eu quelque chose de similaire il y a quelque temps. Essayez d'ajouter la propriété key à la balise d'image comme <Image key={images[this.state.playImage].uri} ... /> . Cela a fonctionné pour moi dans ce cas https://github.com/facebook/react-native/issues/3471

@facebook-github-bot débordement de pile

Salut @josev55 et merci d'avoir posté ça ! @cosmith me dit que ce problème ressemble à une question qu'il serait préférable de poser sur StackOverflow . StackOverflow est incroyable pour les questions-réponses : il dispose d'un système de réputation, de vote, de la possibilité de marquer une question comme répondue. En raison du système de réputation, il est probable que la communauté y verra et répondra à votre question. Cela nous aide également à utiliser le traqueur de bogues GitHub uniquement pour les bogues. Fera cela car c'est vraiment une question qui devrait être posée sur SO.

Cette page vous a été utile?
0 / 5 - 0 notes