meteor react native
2.8.1
Hubungkan aplikasi React Native Anda ke server meteor Anda, dan manfaatkan fitur khusus meteor seperti akun, pelacak data reaktif, dll. Kompatibel dengan versi terbaru dari React Native.
Panduan Meteor · Workshop Pemula · Dokumentasi API Lengkap · Contoh Proyek · Template Starter (Expo) · Lebih Banyak Paket dan Sumber Daya
npm install --save @meteorrn/core@react-native-community/netinfo terpasang@react-native-async-storage/async-storage@>=1.8.1 diinstal. Jika Anda menggunakan Expo, atau tidak dapat menggunakan @react-native-async-storage/async-storage , baca di bawah ini Paket ini menggunakan @react-native-async-storage/async-storage secara default. Ini dapat menyebabkan masalah jika Anda menggunakan versi asli React tertentu, atau jika Anda menggunakan Expo. Untuk menggunakan implementasi AsyncStorage khusus, lulus sebagai opsi di Meteor.connect :
import { AsyncStorage } from 'react-native' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , { AsyncStorage } ) ; Jika Anda menggunakan API AsyncStorage sendiri, penting bagi Anda untuk menggunakan versi yang sama yang digunakan Meteorrn, atau masalah dapat disebabkan karena versi yang bertentangan.
Pastikan Anda menggunakan AsyncStorage yang sama yang Anda masuk ke Meteor (atau @react-native-async-storage/async-storage jika Anda tidak melewati apa pun), atau Anda dapat menggunakan antarmuka paket Meteorrn.
Contoh ini menunjukkan cara menggunakan implementasi toko aman Expo sebagai penyimpanan async. Perhatikan, penyimpanan yang aman di Android dan iOS memiliki batas ukuran atas rendah beberapa megabyte.
import * as SecureStore from 'expo-secure-store' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , {
AsyncStorage : {
getItem : SecureStore . getItemAsync ,
setItem : SecureStore . setItemAsync ,
removeItem : SecureStore . deleteItemAsync ,
} ,
} ) ; import Meteor , { Mongo , withTracker } from '@meteorrn/core' ;
// "mycol" should match the name of the collection on your meteor server,
// or pass null for a local collection
let MyCol = new Mongo . Collection ( 'mycol' ) ;
Meteor . connect ( 'wss://myapp.meteor.com/websocket' ) ; // Note the /websocket after your URL
class App extends React . Component {
render ( ) {
let { myThing } = this . props ;
return (
< View >
< Text > Here is the thing: { myThing . name } </ Text >
</ View >
) ;
}
}
let AppContainer = withTracker ( ( ) => {
Meteor . subscribe ( 'myThing' ) ;
let myThing = MyCol . findOne ( ) ;
return {
myThing ,
} ;
} ) ( App ) ;
export default AppContainer ;Skenario Unik: Menjalankan aplikasi pada perangkat fisik tetapi ingin terhubung ke mesin pengembangan lokal? Lihat komentar masalah ini.
Paket @meteorrn/core telah disimpan seringan mungkin. Untuk mengakses lebih banyak fitur, Anda dapat menggunakan paket pendamping.
Berikut beberapa contoh:
@meteorrn/oauth-google : memungkinkan Anda untuk membiarkan pengguna masuk ke aplikasi Anda dengan google@meteorrn/oauth-facebook : Memungkinkan Anda untuk membiarkan pengguna masuk ke aplikasi Anda dengan FacebookUntuk daftar lengkap paket yang diakui secara resmi, lihat @meteorrn github org.
Paket ini kompatibel dengan versi React Native dari 0,60,0 hingga terbaru (0,63,2)
Untuk React Native <0,60,0 Gunakan react-native-meteor.
Bermigrasi dari react-native-meteor :
MeteorListView & MeteorComplexListView telah dihapusCollectionFS telah dihapuscreateContainer telah dihapusconnectMeteor ) telah dilepascomposeWithTracker telah dihapus Sementara paket ini dirancang dengan dalam pikiran React Native, ia juga mampu berjalan di web (menggunakan react-dom ). Ini dapat bermanfaat jika Anda memerlukan implementasi meteor ringan, jika Anda ingin membuat aplikasi klien terpisah dari basis kode server Anda, dll. Satu-satunya perubahan yang diperlukan adalah menyediakan implementasi AsyncStorage. Berikut adalah contoh sederhana:
const AsyncStorage = {
setItem : async ( key , value ) => window . localStorage . setItem ( key , value ) ,
getItem : async ( key ) => window . localStorage . getItem ( key )
removeItem : async ( key ) => window . localStorage . removeItem ( key )
}
Meteor . connect ( "wss://.../websock" , { AsyncStorage } ) ; Tab Rilis GitHub mencakup changelog lengkap
Untuk memastikan bahwa paket pendamping Meteorrn menggunakan versi yang sama dari paket eksternal seperti AsyncStorage sebagai inti, @meteorrn/core menyediakan antarmuka paket, di mana paket pendamping dapat mengakses paket tertentu. Saat ini, antarmuka paket mengembalikan objek dengan properti berikut:
import Meteor from '@meteorrn/core' ;
const { AsyncStorage } = Meteor . packageInterface ( ) ;observeChanges (tetapi ia mengimplementasikan observe ) Perpustakaan mencakup beberapa kelas dan konstruksi internal, yang sebagian besar beroperasi sendiri dan tanpa pengaruh pengguna.
Debugging perpustakaan yang bekerja seperti yang diharapkan membutuhkan mendengarkan beberapa acara. Berikut ini menunjukkan beberapa acara yang memungkinkan penebangan dan inspeksi terperinci.
Pencatatan dapat berguna untuk analisis dan instrumentasi aplikasi produksi di mana tidak ada akses konsol yang mungkin terjadi
Cara paling nyaman untuk melacak internal adalah melalui Data.onChange :
const Data = Meteor . getData ( ) ;
data . onChange ( ( event ) => console . debug ( event ) ) ;Di bawah kap ini tidak:
this . db . on ( 'change' , cb ) ;
this . ddp . on ( 'connected' , cb ) ;
this . ddp . on ( 'disconnected' , cb ) ;
this . on ( 'loggingIn' , cb ) ;
this . on ( 'loggingOut' , cb ) ;
this . on ( 'change' , cb ) ; Anda juga dapat mendengarkan loggingIn , loggingOut , onLogin , onLoginFailure dan change secara individual:
const Data = Meteor . getData ( ) ;
Data . on ( 'loggingIn' , ( e ) => console . debug ( 'loggingIn' , e ) ) ;
// ... const events = [
// connection messages
'connected' ,
'disconnected' ,
// Subscription messages (Meteor Publications)
'ready' ,
'nosub' ,
'added' ,
'changed' ,
'removed' ,
// Method messages (Meteor Methods)
'result' ,
'updated' ,
// Error messages
'error' ,
] ;
const Data = Meteor . getData ( ) ;
events . forEach ( ( eventName ) => {
Data . ddp . on ( eventName , ( event ) => console . debug ( eventName , event ) ) ;
} ) ; Perpustakaan mencoba menggunakan Websocket asli, disediakan oleh Reactnative. Dengan peristiwa berikut, Anda dapat menghubungkan ke dalam pesan tingkat rendah dengan server:
open - Websocket berhasil membukaclose - Websocket berhasil ditutupmessage:out - Pesan dikirim ke servermessage:in - Pesan masuk dari servererror - Terjadi kesalahan pada level WebSocket const Data = Meteor . getData ( ) ;
const socket = Data . ddp . socket ;
const events = [ 'open' , 'close' , 'message:out' , 'message:in' , 'error' ] ;
events . forEach ( ( eventName ) => {
socket . on ( eventName , ( event ) => console . debug ( eventName , event ) ) ;
} ) ; Ada kemungkinan untuk menghubungkan ke Websocket satu tingkat lebih rendah dengan mengakses soket mentah.
Ini sangat berkecil hati untuk produksi, digunakan dengan risiko Anda sendiri! Catatan, bahwa data.ddp.socket mendengarkan beberapa di antaranya (misalnya kesalahan) dan menggelembungkannya tetapi juga menangani pembersihan dan pengumpulan sampah dengan benar. Kesalahan soket mentah akan membuat properti
isRawdiatur ketrue.
const Data = Meteor . getData ( ) ;
const rawSocket = Data . ddp . socket . rawSocket ;
rawSocket . onopen = ( e ) => console . debug ( 'raw open' , e ) ;
rawSocket . onmessage = ( e ) => console . debug ( 'raw message' , e ) ;
rawSocket . onclose = ( e ) => console . debug ( 'raw close' , e ) ;
rawSocket . onerror = ( e ) => console . debug ( 'raw error' , e ) ; Anda dapat menghubungkan ke acara DB dari minimongo secara langsung:
const Data = Meteor . getData ( ) ;
Data . db . on ( 'change' , ( e ) => console . debug ( e ) ) ;Sementara Meteor mengandalkan koneksi WebSocket dan DDP sebagai protokol, Anda mungkin kadang -kadang ingin mengirim data melalui HTTP.
Contoh berikut memberikan cara mudah untuk mendengarkan kesalahan dan mengirimkannya ke layanan melalui permintaan fetch :
// in your App code
const errorToBody = ( err ) => {
const errProps = Object . getOwnPropertyNames ( err ) ;
const formBody = [ ] ;
for ( const prop of errProps ) {
const encodedKey = encodeURIComponent ( prop ) ;
const encodedValue = encodeURIComponent ( err [ prop ] ) ;
formBody . push ( encodedKey + '=' + encodedValue ) ;
}
return formBody . join ( '&' ) ;
} ;
const sendError = ( err ) => {
fetch ( 'https://mydomain.tld/log/error' , {
method : 'POST' ,
headers : {
'Content-Type' : 'application/x-www-form-urlencoded;charset=UTF-8' ,
} ,
body : errToBody ( err ) ,
} )
. then ( console . debug )
. catch ( console . error ) ;
} ;
// hook into all DDP and socket-level errors
const Data = Meteor . getData ( ) ;
Data . dpp . on ( 'error' , ( e ) => {
const error = e instanceof Error ? e : e ?. error ;
return error && sendError ( error ) ;
} ) ; | Whazzup.co | StarlingRealtime |
|---|---|
 | |
| Whazzup.co menggunakan meteor bereaksi asli di aplikasi asli mereka | StarlingRealTime menggunakan meteor bereaksi asli di aplikasi produksi mereka |
| Lea.online | Plan B Schule |
|---|---|
| Lea.online menggunakan meteor bereaksi asli di aplikasi pembelajaran seluler asli mereka | Plan B Schule menggunakan meteor bereaksi asli di aplikasi produksinya |
Ingin memamerkan aplikasi Anda menggunakan meteor-react-native? Cukup buat PR untuk menambahkan logo Anda di sini.
Meteor React Native dikelola oleh Jan Küster dan sebelumnya dikelola oleh Nathaniel Dsouza yang tersedia untuk konsultasi: [email protected]
Kami menghargai kontribusi apa pun untuk proyek ini!
Jika Anda memiliki masalah, pertanyaan atau ingin mendiskusikan sesuatu, maka gunakan tautan masalah kami yang akan membantu Anda menemukan tempat yang tepat untuk ditanyakan atau diceritakan.
Jika Anda ingin berkontribusi kode, maka silakan, pastikan Anda telah membaca panduan kontribusi kami dan kode perilaku kami.
Anda dapat meminta kami kapan saja, jika Anda macet atau dokumen ini tidak jelas bagi Anda.
MIT, lihat file lisensi
