web-dev-qa-db-fra.com

Réagissez natif: require () avec Dynamic String?

J'ai lu plusieurs articles sur les problèmes rencontrés par les utilisateurs de React Native et de la fonction require() lors de la tentative d'utilisation d'une ressource dynamique telle que:

Dynamique (échoue):

urlName = "sampleData.json";
data = require('../' + urlName);

vs statique (réussit):

data = require('../sampleData.json');

J'ai lu sur certains sujets qu'il s'agissait d'un bogue dans React Native et dans d'autres qu'il s'agissait d'une fonctionnalité.

Existe-t-il un nouveau moyen d'exiger une ressource dynamique dans une fonction?

Related Posts (tous assez vieux en temps de réaction):

javascriptreactjsreact-nativeecmascript-6require
16
Jake Chasan

Comme j'en ai entendu parler, le require() de react n'utilise que des URL statiques et non des variables; cela signifie que vous devez faire require('/path/file'), jetez un oeil à ce problème sur github et celui-ci pour plus de solutions alternatives, un ou deux autres moyens de le faire!

const images = {
profile: {
    profile: require('./profile/profile.png'),
    comments: require('./profile/comments.png'),
},
   image1: require('./image1.jpg'),
   image2: require('./image2.jpg'),
};

export default images;

puis

import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

à partir de ceci répondre

7
gocci

En lisant les documents, j'ai trouvé une réponse efficace et je peux utiliser des images dynamiques. Dans les documents, ils y font référence sous le terme d'images réseau.

https://facebook.github.io/react-native/docs/images#network-images

Pas sûr que cela puisse être appliqué à d'autres types de fichiers, mais comme ils le demandent, il faut utiliser des types d'image non

Vous auriez besoin d'utiliser l'uri: call

data = {uri: urlName}

Pour moi, j'ai des images qui travaillent de manière dynamique avec cela

<Image source={{uri: image}} />
0
DaveClissold

Si vous devez basculer entre plusieurs images stockées localement, vous pouvez également utiliser cette méthode:

        var titleImg;
        var textColor;
        switch (this.props.data.title) {
        case 'Футбол':
            titleImg = require('../res/soccer.png');
            textColor = '#76a963';
            break;
        case 'Баскетбол':
            titleImg = require('../res/basketball.png');
            textColor = '#d47b19';
            break;
        case 'Хоккей':
            titleImg = require('../res/hockey.png');
            textColor = '#3381d0';
            break;
        case 'Теннис':
            titleImg = require('../res/tennis.png');
            textColor = '#d6b031';
            break;
        }

Dans cet extrait, je change les variables titleImg et textColor en fonction de l'accessoire. J'ai mis cet extrait directement dans la méthode render().

0
Daniel Chernyshev

Utilisez-vous un bundle de modules tel que webpack?

Si oui, vous pouvez essayer require.ensure()

Voir: https://webpack.js.org/guides/code-splitting/#dynamic-imports

0
kngroo