Как динамически менять изображение из директории в React Native?

В React Native существует несколько способов динамически менять изображение из директории. Рассмотрим несколько вариантов.

1. Использование require():
Самый простой способ - использовать функцию require(), которая позволяет загрузить изображение из директории и присвоить его переменной.
Пример кода:

   import React from 'react';
   import { View, Image } from 'react-native';
   
   const MyComponent = ({ imageName }) => {
     return (
       <View>
         <Image source={require('./path/to/images/' + imageName)} />
       </View>
     );
   };
   
   export default MyComponent;

В этом примере переменная imageName содержит имя файла изображения в директории. Обратите внимание, что путь к изображению должен быть относительным и начинаться с ./.

2. Использование переменной состояния:
Если вам необходимо менять изображение динамически в зависимости от некоторого состояния, можно использовать переменную состояния и функцию require().
Пример кода:

   import React, { useState } from 'react';
   import { View, Image } from 'react-native';
   
   const MyComponent = () => {
     const [imageName, setImageName] = useState('defaultImage.png');
   
     const changeImage = () => {
       setImageName('newImage.png');
     };
   
     return (
       <View>
         <Image source={require('./path/to/images/' + imageName)} />
         <Button onPress={changeImage} title="Change Image" />
       </View>
     );
   };
   
   export default MyComponent;

В этом примере переменная состояния imageName содержит имя текущего файла изображения, а функция setImageName позволяет изменять значение переменной. При нажатии на кнопку "Change Image" вызывается функция changeImage, которая изменяет имя файла на "newImage.png".

3. Использование URL:
Если требуется загружать изображение по URL, можно использовать компонент Image и указать источник изображения как URL.
Пример кода:

   import React from 'react';
   import { View, Image } from 'react-native';
   
   const MyComponent = () => {
     return (
       <View>
         <Image source={{ uri: 'https://example.com/path/to/image.jpg' }} />
       </View>
     );
   };
   
   export default MyComponent;

В этом примере изображение загружается по указанному URL. Обратите внимание, что изображение должно быть доступно по указанному URL, и ваше устройство должно иметь соединение с интернетом.

Надеюсь, эти примеры помогут вам динамически менять изображение из директории в React Native. Удачи!