Reaguje natywna zmienna użycia dla pliku obrazu

Question

Wiem, że aby użyć statycznego obrazu w reakcji natywnej, musisz wykonać wymaganie specjalnie dla tego obrazu, ale próbuję załadować losowy obraz na podstawie liczby. Na przykład mam 100 obrazów o nazwie img1.png - img100.png w moim katalogu. Staram się znaleźć sposób, aby wykonać następujące czynności

<Image source={require(`./img${Math.floor(Math.random() * 100)}.png`)}/> 

wiem, że to nie działa celowo, ale żadnego obejścia byłoby bardzo mile widziane.

Answer 1

W JS wymagają instrukcje są rozwiązywane w pakiecie czas (gdy pakiet JS jest obliczany). Dlatego nie jest obsługiwane umieszczanie wyrażenie zmiennej jako argument dla require.

W przypadku wymagających zasobów jest jeszcze trudniej. Gdy masz require('./someimage.png'), React Native packager ustawi żądany obraz, a następnie zostanie dołączony do niego razem z aplikacją, dzięki czemu będzie można go używać jako "statycznego" zasobu, gdy aplikacja jest uruchomiona (w rzeczywistości w trybie deweloperskim nie będzie to pakiet obraz z twoją aplikacją, ale zamiast tego obraz będzie serwowany z serwera, ale to nie ma znaczenia w twoim przypadku).

Jeśli chcesz użyć obrazu losowego jako statycznego zasobu, musisz poinformować swoją aplikację, aby powiązała ten obraz. Można to zrobić na kilka sposobów:

1) Dodaj go jako statyczny atut swojej aplikacji, a następnie odwoływać się do niego z <Image src={{uri:'name_of_the_image_in_assets.png'}}/> (here sposób można dodać go do natywnej aplikacji na iOS)

2) Wymagaj statycznie wszystkich obrazów z góry. Sth w postaci:

var randomImages = [ 
    require('./image1.png'), 
    require('./image2.png'), 
    require('./image3.png'), 
    ... 
]; 

Następnie w kodzie można zrobić:

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/> 

3) Użyj wizerunek sieci z <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

Answer 2

Dla każdego, poznawanie reagować-natywnego zwierzę, powinno to pomóc :)

Odwiedziłem także kilka stron w przeszłości, ale okazało się, że jest coraz bardziej frustrujące. Dopóki nie przeczytam this site here.

To odmienne podejście, ale ostatecznie się opłaca. Zasadniczo najlepszym rozwiązaniem byłoby załadowanie wszystkich zasobów w jednym miejscu. Rozważmy następującą strukturę

app 
    |--img 
     |--image1.jpg 
     |--image2.jpg 
     |--profile 
      |--profile.png 
      |--comments.png 
     |--index.js 

W index.js, można to zrobić:

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

export default images; 

w twoich poglądów, trzeba importować składnik zdjęć tak:

import Images from './img/index'; 

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

Każdy ma różne sposoby do końca, wystarczy wybrać ten, który najbardziej Ci odpowiada.