“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 16. kısmıdır. Bir önceki makalede (Part 15), React Native Community Blur paketi ile Android ve iOS uygulamalarının arka plan görünümünü bulanık(blur) nasıl yapabileceğimizi anlattım.
Bu makalede React Native uygulamalarına görselleri nasıl yükleyebiliriz konusunu öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Görseller, bir mobil uygulamaya başka bir boyut katar. Kullanıcı tarafından oluşturulan görüntüler bunu güçlendirir.

Bu makale de React Native ile geliştirilen mobil uygulamanızda, fetch API ile kullanıcılarınıza resim yükleme işlemini nasıl yapabileceğinizi anlatacağım.

Kurulum

Görüntüleri gerçekten yüklemeye başlamadan önce iki proje oluşturacağız:
1-Bir React Native uygulaması
2-Basit Node Server (böylece fotoğrafı yükleyebileceğimiz bir yerimiz var)

React Native App

Burada birkaç şey yapacağız:

1-Her iki uygulamamızın da içinde olacağı bir dizin oluşturma
2-Yeni bir React Native uygulaması oluşturma
3- react-native-image-picker kitaplığını yükleme
4-react-native-image-picker yerel bağımlılıklarını bağlama
Terminalinizde aşağıdakileri çalıştırın:

mkdir image-upload-example
cd image-upload-example
react-native init mobile
cd mobile
npm install --save react-native-image-picker
react-native link react-native-image-picker

Ardından, React Native uygulamanızla ilişkili hem iOS hem de Android uygulamalarında gerekli izinleri etkinleştirmeniz gerekir.

iOS’ta bu, mobile/ios/mobile/Info.plist’te gerçekleşir ve şunu eklemeniz gerekmektedir.

<key>NSPhotoLibraryUsageDescription</key>
<string>For choosing a photo.</string>
<key>NSCameraUsageDescription</key>
<string>For taking a photo.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>For saving a photo.</string>

Android’de, AndroidManifest.xml dosyasını mobil/android’de birkaç dizin aşağısında bulmak ve şunu eklemeniz gerekmektedir.

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Daha sonra, react-native run-ios veya react-native run-android’i çalıştırabilir ve aşağıdakine benzer bir sonuç elde edebilirsiniz:

Node Server

Yeni bir terminal penceresinde aşağıdaki komutları çalıştırın:

cd image-upload-example
mkdir server
cd server
mkdir images
npm init // answer the questions
npm install --save express body-parser multer
touch index.js

Ardından index.js’ye aşağıdakileri yazın:

index.js

const Express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser');

const app = Express();
app.use(bodyParser.json());

const Storage = multer.diskStorage({
  destination(req, file, callback) {
    callback(null, './images');
  },
  filename(req, file, callback) {
    callback(null, `${file.fieldname}_${Date.now()}_${file.originalname}`);
  },
});

const upload = multer({ storage: Storage });

app.get('/', (req, res) => {
  res.status(200).send('You can post to /api/upload.');
});

app.post('/api/upload', upload.array('photo', 3), (req, res) => {
  console.log('file', req.files);
  console.log('body', req.body);
  res.status(200).json({
    message: 'success!',
  });
});

app.listen(3000, () => {
  console.log('App running on http://localhost:3000');
});

Son olarak, uygulamayı index.js node ile çalıştırabilirsiniz.

Şimdi başlamaya hazırız!

Resim Seçme

Bir resim yüklemeden önce, yükleyecek bir resmimiz olmalı! İşte burada react-native-image-picker devreye giriyor. Cihazımızdan bir görüntü seçmemize izin verecek.
mobile/App.js’yi aşağıdakilerle güncelleyebilirsiniz:

App.js

import React from 'react';
import { View, Text, Image, Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default class App extends React.Component {
  state = {
    photo: null,
  };

  handleChoosePhoto = () => {
    const options = {
      noData: true,
    };
    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.uri) {
        this.setState({ photo: response });
      }
    });
  };

  render() {
    const { photo } = this.state;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        {photo && (
          <Image
            source={{ uri: photo.uri }}
            style={{ width: 300, height: 300 }}
          />
        )}
        <Button title="Choose Photo" onPress={this.handleChoosePhoto} />
      </View>
    );
  }
}

Bu kod, kullanıcının resim galerisini açmasına ve bir fotoğraf seçmesine olanak tanır. Bir fotoğraf seçtiklerinde, uygulamada şu şekilde görüntülenecektir:

Request Body Oluşturma

Herhangi bir veri oluşturmak/güncellemek için daha önce getirme API’sini kullandıysanız, muhtemelen şöyle bir şey yapmışsınızdır:

example.js

fetch('MY_API_URL', {
  method: 'POST',
  body: JSON.stringify({
    userId: '123',
  }),
});

Bir görüntü yüklemek için bunun yerine verileri multipart/form-data kodlama türüne göre yüklememiz gerekir.

Bunu yapmak için FormData kullanarak isteğimizin gövdesini oluşturabiliriz.

Sunucumuzu kurduğumuzda, resmin fotoğraf anahtarında olacağını söyledik, bu yüzden gerekli tüm fotoğraf bilgilerini koyduğumuzdan emin olmamız gerekiyor. Ayrıca diğer ilişkili bilgileri (userId gibi) iletmenize de izin vereceğiz.

App.js

const createFormData = (photo, body) => {
  const data = new FormData();

  data.append('photo', {
    name: photo.fileName,
    type: photo.type,
    uri:
      Platform.OS === 'android' ? photo.uri : photo.uri.replace('file://', ''),
  });

  Object.keys(body).forEach((key) => {
    data.append(key, body[key]);
  });

  return data;
};

Önce FormData’yı başlatıyoruz ve ardından fotoğraf anahtarını ekliyoruz. Bu mesajın gövdesi, bunun işe yaraması için gereken minimum değerdir. Bir dosya adı, bir dosya türü ve ardından bir uri iletmemiz gerekiyor. Uri, görüntünün cihazda bulunduğu yerdir.

Çalışması için bu uri’ye platforma dayalı olarak biraz masaj yapmamız gerektiğini fark edeceksiniz. Esasen, sadece iOS’taki uri’den file:// soymak için kaynar.

Son olarak, uç noktaya iletmek istediğimiz herhangi bir ek veriyi (bu fotoğraf değil) döngüye alırız.

Resmin Yüklenmesi
Son olarak, fotoğrafı yükleyebiliriz.

Fotoğrafı yüklemek için bileşenimizde yeni bir işlev oluşturacağız.

App.js

handleUploadPhoto = () => {
  fetch('http://localhost:3000/api/upload', {
    method: 'POST',
    body: createFormData(this.state.photo, { userId: '123' }),
  })
    .then((response) => response.json())
    .then((response) => {
      console.log('upload succes', response);
      alert('Upload success!');
      this.setState({ photo: null });
    })
    .catch((error) => {
      console.log('upload error', error);
      alert('Upload failed!');
    });
};

Endpoint api/upload’da ve bir POST isteği bekliyor. Daha sonra daha önce belirtmek üzere kaydettiğimiz fotoğrafı createFormData fonksiyonuna geçiriyoruz.

Daha sonra getirmenin bize sağladığı söz zincirine girebiliriz. Önce yanıtı bir json nesnesine dönüştürüyoruz ve ardından fotoğrafın yüklendiği konusunda kullanıcıyı uyarıyoruz!

Görsel yüklenemezse, bu hatayı yakalar ve kullanıcıya görselin yüklenemediğini bildiririz.

Fotoğrafı gerçekten yüklemeden önce, bir kullanıcıya işlemi başlatmak için dokunabilecekleri bir düğme vermemiz gerekiyor.

App.js

export default class App extends React.Component {
  ...

  render() {
    const { photo } = this.state
    return (
      
        {photo && (
          
            
            
          
        )}
        
      
    )
  }
}

Şimdi, bir fotoğraf seçip yükle düğmesine bastığınızda, sunucuda/görüntülerde sunucuda yeni bir görüntünün göründüğünü görmelisiniz.

 

Kaynak:https://www.reactnativeschool.com/