Как реализовать фильтры фотографий Instagram в React Native

Instagram растет как сумасшедший за последние несколько лет, и одна из ключевых функций, которые способствовали этому росту, - это знаменитые фотофильтры. Разрешив пользователям применять к своим фотографиям различные фильтры и улучшать их внешний вид, Instagram создал удивительный продукт. В настоящее время любое современное фото-приложение должно поддерживать фотофильтры. Итак, мы собираемся посмотреть, как реализовать фильтры фотографий Instagram в React Native.

В сегодняшней статье мы поговорим о том, как реализовать фотофильтры в Instagram. Мы собираемся использовать пакет response-native-image-filter-kit . Здесь, в Instamobile, мы используем эту библиотеку, чтобы легко встроить эту функцию фотофильтров в наш Клон Instagram.

Реализация фотофильтров Instagram в React Native

Прежде всего, давайте установим упомянутый ранее пакет в ваш проект React Native, выполнив:

npm install -s react-native-image-filter-kit

Вот простой проект React Native, который применяет фильтры фотографий Instagram к изображению, включенному в базу кода (имя изображения - «parrot.png», поэтому убедитесь, что вы включили его в папку проекта, чтобы его можно было загрузить в приложение. ). В файле App.js просто поместите следующий фрагмент кода:

import React from 'react';
import {Image, SafeAreaView} from 'react-native';
import {Emboss} from 'react-native-image-filter-kit';

const App = () => (
  <>
    <SafeAreaView />
    <Image
      style={styles.image}
      source={require('./parrot.png')}
      resizeMode={'contain'}
    />
    <Emboss
      image={
        <Image
          style={styles.image}
          source={require('./parrot.png')}
          resizeMode={'contain'}
        />
      }
    />
  </>
);

const styles = {
  image: {
    width: 320,
    height: 320,
    marginVertical: 10,
    alignSelf: 'center',
  },
};

Компонент Emboss, предоставляемый react-native-filter-kit, принимает компонент Image в качестве опоры и применяет фильтр, как показано на снимке экрана ниже:

Библиотека react-native-image-filter-kit предоставляет множество других компонентов фильтра, поэтому мы собираемся найти способ реализовать более полный фильтр, точно так же, как это делается в самом приложении Instagram.

Прежде всего, нам нужно определить массив компонентов фильтра, которые мы собираемся визуализировать и выбирать из:

import {
  AdenCompat,
  _1977Compat,
  BrannanCompat,
  BrooklynCompat,
  ClarendonCompat,
  EarlybirdCompat,
  GinghamCompat,
  HudsonCompat,
  InkwellCompat,
  KelvinCompat,
  LarkCompat,
  LofiCompat,
  MavenCompat,
  MayfairCompat,
  MoonCompat,
  NashvilleCompat,
  PerpetuaCompat,
  ReyesCompat,
  RiseCompat,
  SlumberCompat,
  StinsonCompat,
  ToasterCompat,
  ValenciaCompat,
  WaldenCompat,
  WillowCompat,
  Xpro2Compat,
} from 'react-native-image-filter-kit'; 

const FILTERS = [
  {
    title: 'Normal',
    filterComponent: AdenCompat,
  },
  {
    title: 'Maven',
    filterComponent: MavenCompat,
  },
  {
    title: 'Mayfair',
    filterComponent: MayfairCompat,
  },
  {
    title: 'Moon',
    filterComponent: MoonCompat,
  },
  {
    title: 'Nashville',
    filterComponent: NashvilleCompat,
  },
  {
    title: 'Perpetua',
    filterComponent: PerpetuaCompat,
  },
  {
    title: 'Reyes',
    filterComponent: ReyesCompat,
  },
  {
    title: 'Rise',
    filterComponent: RiseCompat,
  },
  {
    title: 'Slumber',
    filterComponent: SlumberCompat,
  },
  {
    title: 'Stinson',
    filterComponent: StinsonCompat,
  },
  {
    title: 'Brooklyn',
    filterComponent: BrooklynCompat,
  },
  {
    title: 'Earlybird',
    filterComponent: EarlybirdCompat,
  },
  {
    title: 'Clarendon',
    filterComponent: ClarendonCompat,
  },
  {
    title: 'Gingham',
    filterComponent: GinghamCompat,
  },
  {
    title: 'Hudson',
    filterComponent: HudsonCompat,
  },
  {
    title: 'Inkwell',
    filterComponent: InkwellCompat,
  },
  {
    title: 'Kelvin',
    filterComponent: KelvinCompat,
  },
  {
    title: 'Lark',
    filterComponent: LarkCompat,
  },
  {
    title: 'Lofi',
    filterComponent: LofiCompat,
  },
  {
    title: 'Toaster',
    filterComponent: ToasterCompat,
  },
  {
    title: 'Valencia',
    filterComponent: ValenciaCompat,
  },
  {
    title: 'Walden',
    filterComponent: WaldenCompat,
  },
  {
    title: 'Willow',
    filterComponent: WillowCompat,
  },
  {
    title: 'Xpro2',
    filterComponent: Xpro2Compat,
  },
  {
    title: 'Aden',
    filterComponent: AdenCompat,
  },
  {
    title: '_1977',
    filterComponent: _1977Compat,
  },
  {
    title: 'Brannan',
    filterComponent: BrannanCompat,
  },
];

Затем мы должны отобразить горизонтальный список фильтров внизу и динамически изменить изображение фильтра в качестве центрального изображения, когда фильтр выбран. Ваш файл App.js станет таким:

import React, {useRef, useState} from 'react';
import {
  FlatList,
  Image,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
} from 'react-native';

const App = () => {
  const extractedUri = useRef('https://www.hyundai.com/content/hyundai/ww/data/news/data/2021/0000016609/image/newsroom-0112-photo-1-2021elantranline-1120x745.jpg');
  const [selectedFilterIndex, setIndex] = useState(0);

  const onExtractImage = ({nativeEvent}) => {
    extractedUri.current = nativeEvent.uri;
  };

  const onSelectFilter = selectedIndex => {
    setIndex(selectedIndex);
  };

  const renderFilterComponent = ({item, index}) => {
    const FilterComponent = item.filterComponent;
    const image = (
      <Image
        style={styles.filterSelector}
        source={require('./car.jpg')}
        resizeMode={'contain'}
      />
    );

    return (
      <TouchableOpacity onPress={() => onSelectFilter(index)}>
        <Text style={styles.filterTitle}>{item.title}</Text>
        <FilterComponent image={image} />
      </TouchableOpacity>
    );
  };

  const SelectedFilterComponent = FILTERS[selectedFilterIndex].filterComponent;

  return (
    <>
      <SafeAreaView />
      {selectedFilterIndex === 0 ? (
        <Image
          style={styles.image}
          source={require('./car.jpg')}
          resizeMode={'contain'}
        />
      ) : (
        <SelectedFilterComponent
          onExtractImage={onExtractImage}
          extractImageEnabled={true}
          image={
            <Image
              style={styles.image}
              source={require('./car.jpg')}
              resizeMode={'contain'}
            />
          }
        />
      )}

      <FlatList
        data={FILTERS}
        keyExtractor={item => item.title}
        horizontal={true}
        renderItem={renderFilterComponent}
      />
    </>
  );
};

const styles = StyleSheet.create({
  image: {
    width: 520,
    height: 520,
    marginVertical: 10,
    alignSelf: 'center',
  },
  filterSelector: {
    width: 100,
    height: 100,
    margin: 5,
  },
  filterTitle: {
    fontSize: 12,
    textAlign: 'center',
  },
});

Этот исходный код создаст простое приложение React Native, которое поддерживает выбор различных фотофильтров Instagram, как и настоящий фоторедактор Instagram:

После выбора метод-обработчик onExtractImage сохраняет URL-адрес извлеченного изображения после выбора фильтра в переменной extractedUri ref, которую вы можете сохранить на своем сервере.

Вывод

Теперь, когда мы узнали, как реализовать фильтры Instagram, вам следует ознакомиться с нашим шаблоном Instagram Clone, который представляет собой полнофункциональную кодовую базу, поддерживающую большинство функций Instagram, таких как фотофильтры, эфемерные истории и каналы сообщений.

Первоначально опубликовано на https://www.instamobile.io 15 апреля 2021 г.

Больше контента на plainenglish.io