React Native Fetch: Panduan Lengkap – Codewithaden

Dalam tutorial ini, kita akan melihat bagaimana mengintegrasikan Bereaksi asli aplikasi dengan kode backend menggunakan Fetch API . Jaringan adalah operasi yang secara inheren asinkron.

Apa yang diambil dalam JavaScript?

Mengambil adalah jaringan berbasis janji terbaik API dalam JavaScript. Itu mengambil memungkinkan Anda membuat permintaan jaringan serupa XmlHttpRequest Xhr ). Itu mengambil() Metode hanya memiliki satu argumen wajib: Url dari sumber daya yang ingin Anda ambil.

Bereaksi asli Fetch

Untuk mengintegrasikan Bereaksi asli dengan Fetch API, Tentukan sumber daya dan lewati URI itu ke mengambil() fungsi, yang mengembalikan data berdasarkan permintaan dan menampilkan data itu melalui komponen tampilan. Kami akan menggunakan API GitHub karena mudah dikonsumsi dan mudah dimengerti.

Begitu banyak orang yang bingung dengan layanan frontend dan backend. Mereka bahkan tidak dapat memikirkan bagaimana build frontend mereka dapat berkomunikasi dengan server. Apa data yang telah ditransfer dari aplikasi mereka ke server? Apa tipe data yang dipindahkan bolak -balik?

Jadi dalam tutorial ini, Anda akan melihat bagaimana kami dapat mengkonsumsi API backend di React Native Build kami.

Kami akan memulai proyek kami dengan menginstal React Native. Jadi pertama -tama, kita perlu menginstal proyek React Native.

Langkah 1: Instal React Native di Mac

Ketik perintah berikut untuk menginstalnya secara global; Jika Anda sudah menginstalnya, Anda tidak perlu menginstal Create-react-native-App secara global.

sudo npm install -g create-react-native-app 

Setelah itu, kita perlu menginstal proyek yang sebenarnya dengan perintah berikut.

create-react-native-app Networking 

create

Setelah itu, mari kita mulai proyek dengan mengetikkan perintah berikut.

cd Networking
npm run ios 

Kami akan membuat proyek kecil ini sebagai Aplikasi iOS .

Jika Anda adalah pengguna Windows, Anda tidak dapat melanjutkan contoh ini, tetapi meskipun Anda dapat mulai dari langkah di mana Fetch akan digunakan, Anda dapat memahami bagaimana Fetch bekerja karena tidak tergantung pada platform.

Sekarang, setelah kompilasi proyek, kita akan melihat bahwa itu akan membuka simulator iOS dengan layar default berikut.

create

Langkah 2: Buat navigasi untuk komponen.

Kami akan menggunakan Navigatorios Untuk mengimplementasikan tumpukan navigasi. Navigatorios adalah pembungkus UinavigationController, memungkinkan Anda untuk mencapai tumpukan navigasi.

Itu bekerja sama seperti pada aplikasi asli menggunakan UinavigationController , memberikan animasi dan perilaku yang sama dari Uikit

Untuk mengatur navigator, berikan InitialRoute properti dengan objek rute.

Objek rute digunakan untuk menggambarkan setiap adegan yang dinavigasi aplikasi Anda InitialRoute, yang mewakili rute pertama di navigator Anda. Jadi Anda akan mengimpor komponen ini di dalam App.js mengajukan.

// App.js

import { StyleSheet, Text, View, NavigatorIOS } from 'react-native'; 

Sekarang, setelah itu, kita perlu membuat satu komponen. Jadi buat satu folder di root yang disebut SRC dan buat satu folder yang dipanggil komponen.

Di dalam folder komponen, buat satu file dipanggil SearchComponent.js.

// SearchComponent.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet
} from 'react-native';

export default class SearchComponent extends Component {
  render() {
    return (
      
        Search For Github User
      
    )
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#2a8ab7'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center'
  }
}); 

Saya baru saja menambahkan beberapa gaya dan menulis teks dalam komponen ini.

Sekarang, Cari pencarian adalah komponen dari mana kami dapat mencari pengguna GitHub, mengambil foto profil mereka, dan menampilkannya ke komponen lain.

Oke, sekarang impor komponen ini sebagai InitialRoute Sehingga, ketika kita memuat aplikasi kita, kita dapat melihat komponen ini sebagai layar utama aplikasi kita.

// App.js

import React from 'react';
import { StyleSheet, Text, View, NavigatorIOS } from 'react-native';
import SearchComponent from './src/components/SearchComponent';

export default class App extends React.Component {
  render() {
    return (
        
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#111111'
  },
}); 

Jadi, layar aplikasi kami terlihat seperti ini.

IOS

Langkah 3: Buat input teks untuk pencarian pengguna.

Kami akan menggunakan TextInput komponen dari a reaksi-asli Perpustakaan.

Juga, saya menggunakan Komponen TouchableHighlight.

Ini adalah sebuah Pembungkus untuk membuat pandangan merespons dengan tepat terhadap sentuhan. Jadi, komponen terakhir dengan gaya terlihat seperti ini.

// SearchComponent.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableHighlight
} from 'react-native';

export default class SearchComponent extends Component {

  render() {
    return (
      
        Search For Github User
        
        
              
                  SEARCH
              
            
      
    )
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#2a8ab7'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center'
  },
  searchInput: {
    height: 50,
    padding: 4,
    marginRight: 5,
    fontSize: 23,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 8,
    color: 'white'
  },
  buttonText: {
    fontSize: 18,
    color: '#111',
    alignSelf: 'center'
  },
  button: {
    height: 45,
    flexDirection: 'row',
    backgroundColor:'white',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
}); 

fetch

Langkah 4: Tambahkan Ubah dan Kirim Acara.

Oke, jadi kita perlu mengambil nama pengguna input dan meneruskannya ke API GitHub.

Jadi ketika pengguna mulai mengetik di bidang input, kita perlu mengubah nama pengguna, dan kemudian setelah menekan tombol kirim, nama pengguna dikirim ke API GitHub untuk mencari pengguna.

// SearchComponent.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableHighlight
} from 'react-native';

export default class SearchComponent extends Component {
  constructor(props) {
      super(props);
      this.state = {
        username: '',
        error: false
      }
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(e) {
      this.setState({
        username: e.nativeEvent.text
      });
    }
    handleSubmit() {
      console.log(this.state.username);
    }
  render() {
    return (
      
        Search For Github User
        
        
              
                  SEARCH
              
            
      
    )
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#2a8ab7'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center'
  },
  searchInput: {
    height: 50,
    padding: 4,
    marginRight: 5,
    fontSize: 23,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 8,
    color: 'white'
  },
  buttonText: {
    fontSize: 18,
    color: '#111',
    alignSelf: 'center'
  },
  button: {
    height: 45,
    flexDirection: 'row',
    backgroundColor:'white',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
}); 

Jadi, ketika Anda menekan tombol pencarian, kami bisa mendapatkan nama pengguna di konsol. Untuk panel konsol, Anda perlu mengetik kombinasi tombol -tombol ini: cmd + d di simulator iOS.

Ini akan membuka layar baru, dan Anda harus memulai debugging jarak jauh. Kemudian, itu akan membuka URL server seperti http://localhost:19001/debugger-ui/ .

Buka alat pengembang Chrome dan buka panel konsol.

Sekarang, ketikkan nama pengguna GitHub dan tekan tombol pencarian. Anda akan melihat nama itu muncul di panel konsol karena kami telah mencatat nama itu. Sekarang, nama pengguna itu akan diserahkan ke API GitHub

Langkah 5: Buat layanan fetchuser.

Oke, jadi sekarang buat satu folder di dalam SRC Direktori dipanggil jasa. Lalu, di dalam itu jasa folder, buat satu file baru yang dipanggil Fetchuser.js.

// FetchUser.js

export const getUserInfo = (name) => {
    let username = name.toLowerCase().trim();
    const URL = `https://api.github.com/users/${username}`;
    return fetch(URL)
            .then((res) => res.json());
} 

Di sini, saya telah melewati nama pengguna dari bidang TextInput dan kemudian mengubahnya menjadi huruf kecil dan memangkasnya untuk ruang apa pun.

Lewati nama pengguna itu ke Github API dan kembalikan respons ke fungsi panggilan.

Mengambil Perpustakaan mengembalikan janji. Ini adalah tugas yang tidak sinkron, dan kemudian setelah menyelesaikan data, kami akan menampilkannya di layar.

// SearchComponent.js

import { getUserInfo } from '../services/FetchUser';

handleSubmit() {
      getUserInfo(this.state.username)
          .then((res) => {
              if(res.message === 'Not Found') {
                this.setState({
                    error: 'User not found'
                });
              }
            else {
              this.props.navigator.push({
                title: res.name || 'No Title',
                passProps: {userInfo: res}
              });
              this.setState({
                error: false,
                username: ''
              })
            }
        });
    } 

Sekarang, buat satu komponen baru di dalam komponen Folder menelepon Dashboard.js.

// DashboardComponent.js

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image
} from 'react-native';

export default class DashboardComponent extends Component {
  render() {
    return (
      
        
      
    )
  }
}
const styles = StyleSheet.create({
  container: {
    marginTop: 65,
    flex: 1
  },
  image: {
    height: 350
  }
}); 

Sekarang, impor komponen ini di dalam SearchComponent.js mengajukan.

// SearchComponent.js

import DashboardComponent from './DashboardComponent';

handleSubmit() {
      getUserInfo(this.state.username)
          .then((res) => {
              if(res.message === 'Not Found') {
                this.setState({
                    error: 'User not found'
                });
              }
            else {
              this.props.navigator.push({
                title: res.name || 'No Title',
                passProps: {userInfo: res},
                component: DashboardComponent
              });
              this.setState({
                error: false,
                username: ''
              })
            }
        });
    } 

Di sini, yang telah saya lakukan adalah Fetch akan memberi kami janji, dan setelah menyelesaikan, kami mendapatkan data dari server.

Jika pengguna tidak ditemukan, kami hanya menampilkan kesalahan, dan jika pengguna ditemukan, kami akan meneruskan data itu ke File DashboardComponent.js. Ini akan menampilkan nama pengguna dan gambar pengguna.

React

Langkah 6: Menampilkan kesalahan jika pengguna tidak ditemukan.

Di dalam memberikan() Fungsi, kita perlu meletakkan kondisi bahwa jika keadaan kesalahan diisi dengan kesalahan aktual, kita perlu menampilkan kesalahan kepada pengguna. Kalau tidak, kami tidak ingin menampilkan apa pun.

// SearchComponent.js

render() {
    let showErr = (
      this.state.error ?
      
        {this.state.error}
       :
      
    );
    return (
      
        Search For Github User
        
        
              
                  SEARCH
              
            
            {showErr}
      
    )
  } 

Akhirnya, keduanya SearchComponent.js dan DashboardComponent.js File terlihat seperti ini.

// SearchComponent.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableHighlight
} from 'react-native';
import { getUserInfo } from '../services/FetchUser';
import DashboardComponent from './DashboardComponent';

export default class SearchComponent extends Component {
  constructor(props) {
      super(props);
      this.state = {
        username: '',
        error: false
      }
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(e) {
      this.setState({
        username: e.nativeEvent.text
      });
    }
    handleSubmit() {
      getUserInfo(this.state.username)
          .then((res) => {
              if(res.message === 'Not Found') {
                this.setState({
                    error: 'User not found'
                });
              }
            else {
              this.props.navigator.push({
                title: res.name || 'No Title',
                passProps: {userInfo: res},
                component: DashboardComponent
              });
              this.setState({
                error: false,
                username: ''
              })
            }
        });
    }
  render() {
    let showErr = (
      this.state.error ?
      
        {this.state.error}
       :
      
    );
    return (
      
        Search For Github User
        
        
              
                  SEARCH
              
            
            {showErr}
      
    )
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#2a8ab7'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center'
  },
  searchInput: {
    height: 50,
    padding: 4,
    marginRight: 5,
    fontSize: 23,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 8,
    color: 'white'
  },
  buttonText: {
    fontSize: 18,
    color: '#111',
    alignSelf: 'center'
  },
  button: {
    height: 45,
    flexDirection: 'row',
    backgroundColor:'white',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
});
 

Juga DashboardComponent.js mengajukan.

// DashboardComponent.js

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image
} from 'react-native';

export default class DashboardComponent extends Component {
  render() {
    return (
      
        
      
    )
  }
}
const styles = StyleSheet.create({
  container: {
    marginTop: 65,
    flex: 1
  },
  image: {
    height: 350
  }
}); 

Terima kasih telah mengambilnya.

Garpu saya di github

Posting yang disarankan

Bereaksi aplikasi asli dengan Laravel API

Navigasi asli menggunakan navigasi asli bereaksi

Bereaksi komponen gesek asli

Bereaksi Tampilan Tab Asli

Bereaksi redux asli

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *