Как запустить приложение выбором фото в галереи телефона?

Для запуска приложения React Native с возможностью выбора фото из галереи телефона, есть несколько шагов. Давайте разберемся более подробно:

1. Установка зависимостей:
Вам понадобятся две основные зависимости: react-native-image-picker и react-native-permissions.

Запустите следующие команды для установки этих зависимостей:

   npm install react-native-image-picker --save
   npm install react-native-permissions --save

2. Привязка модулей:
Для привязки модулей к вашему проекту отредактируйте файл android/app/src/main/java/[пакет]/MainApplication.java:

   import com.imagepicker.ImagePickerPackage;
   import com.facebook.react.ReactApplication;
   import com.facebook.react.ReactNativeHost;
   import com.facebook.react.ReactPackage;
   import com.facebook.react.shell.MainReactPackage;

   import java.util.Arrays;
   import java.util.List;

   public class MainApplication extends Application implements ReactApplication {
     //...
   
     @Override
     protected List<ReactPackage> getPackages() {
       @SuppressWarnings("UnnecessaryLocalVariable")
       List<ReactPackage> packages = new  MainReactPackage(),
           new ImagePickerPackage()
       );
       return packages;
     }
   }

3. Открытие галереи и выбор изображения:
В файле, где вы хотите использовать возможность выбора фото, добавьте следующий код:

   import React, { useState } from 'react';
   import { Button, Image } from 'react-native';
   import ImagePicker from 'react-native-image-picker';
   import Permissions from 'react-native-permissions';

   const App = () => {
     const [imageUri, setImageUri] = useState('');

     const handleChoosePhoto = async () => {
       const permission = await Permissions.request('photo');
       if (permission === 'authorized') {
         ImagePicker.showImagePicker({ mediaType: 'photo' }, response => {
           if (response.didCancel) {
             console.log('User cancelled image picker');
           } else if (response.error) {
             console.log('ImagePicker Error: ', response.error);
           } else {
             const uri = response.uri;
             setImageUri(uri);
           }
         });
       }
     };

     return (
       <>
         {!!imageUri && <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />}
         <Button title="Choose Photo" onPress={handleChoosePhoto} />
       </>
     );
   };

   export default App;

В этом примере мы создаем компонент App, который содержит кнопку "Выбрать фото". Когда пользователь нажимает на кнопку, вызывается функция handleChoosePhoto. В этой функции мы запрашиваем разрешение на доступ к фото (используя react-native-permissions) и открываем галерею с помощью ImagePicker.showImagePicker. После выбора фото обновляем состояние компонента с помощью setImageUri. И наконец, отображаем выбранное фото, если imageUri не пустой.

Не забудьте перезапустить ваше приложение после внесения изменений.

Вот и все! Теперь ваше приложение React Native должно иметь возможность выбора фото из галереи телефона.