meteor react native

نيزك رد الفعل الأصلي

قم بتوصيل تطبيق React Native بخادم Meteor الخاص بك ، واستفد من الميزات الخاصة بالنيسور مثل الحسابات ، ومتعقب البيانات التفاعلية ، وما إلى ذلك متوافق مع أحدث إصدار من React Native.

دليل النيزك · ورشة عمل المبتدئين · وثائق API كاملة · مثال على ذلك المشروع · قالب بداية (معرض) · المزيد من الحزم والموارد

سمات

• ؟ ميزات "Meteor Automagical" لتطبيق الهاتف المحمول الخاص بك
• ؟ من السهل الإعداد والتكامل
• قم ببناء تطبيقات الهاتف المحمول باستخدام Rection-Itive + Meteor في أي وقت من الأوقات
• ؟ حسابات / مصادقة Zero-Config
• ؟ معتمد على التخزين مع الافتراضات الصفراء
• المجتمع الداعم في منتديات النيزك ، الركود أو الخلاف!

جدول المحتويات

• تثبيت
  • استخدم سعة تخزين غير متزامنة مختلفة
  • باستخدام Expo Secure Store
• الاستخدام الأساسي
• حزم مصاحبة
• التوافق
• باستخدام على الويب
• Changelog
• واجهة الحزمة
  • استخدام واجهة الحزمة
  • الاختلافات من Meteor Core إلى ملاحظة:
• عرض
• المساهمة والصيانة
• رخصة

تثبيت

1. npm install --save @meteorrn/core
2. تأكد من تثبيت الاعتماد على @react-native-community/netinfo
3. تأكد من أن لديك @react-native-async-storage/async-storage@>=1.8.1 مثبت. إذا كنت تستخدم Expo ، أو لا يمكنك استخدام @react-native-async-storage/async-storage ، اقرأ أدناه

استخدم سعة تخزين غير متزامنة مختلفة

تستخدم هذه الحزمة @react-native-async-storage/async-storage افتراضيًا. قد يتسبب هذا في حدوث مشكلات إذا كنت تستخدم بعض الإصدارات الأصلية React ، أو إذا كنت تستخدم Expo. لاستخدام تطبيق غير متزامن مخصص ، تمريره كخيار في Meteor.connect :

 import { AsyncStorage } from 'react-native' ;

// ...

Meteor . connect ( 'wss://myapp.meteor.com/websocket' , { AsyncStorage } ) ;

إذا كنت تستخدم واجهة برمجة تطبيقات AsyncStorage بنفسك ، فمن المهم أن تستخدم نفس الإصدار الذي تستخدمه Meteorrn ، أو قد تكون هناك مشكلات بسبب الإصدارات المتضاربة.

تأكد من أنك تستخدم نفس AsyncStorage الذي تنتقل إليه إلى Meteor (أو @react-native-async-storage/async-storage إذا كنت لا تمر أي شيء) ، أو يمكنك استخدام واجهة حزمة Meteorrn.

باستخدام Expo Secure Store

يوضح هذا المثال كيفية استخدام تطبيق Expo Secure Store كتخزين Async. لاحظ أن هذا التخزين الآمن في كل من Android و iOS لديه حد كبير في الحجم العلوي من بضعة ميغابايت.

 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 ;

سيناريوهات فريدة: تشغيل التطبيق على جهاز فعلي ولكن هل ترغب في الاتصال بجهاز التطوير المحلي؟ تحقق من هذا التعليق القضية.

حزم مصاحبة

تم الحفاظ على حزمة @meteorrn/core كضوء قدر الإمكان. للوصول إلى المزيد من الميزات ، يمكنك استخدام الحزم المصاحبة.

فيما يلي بعض الأمثلة:

• @meteorrn/oauth-google : يتيح لك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك مع Google
• @meteorrn/oauth-facebook : يتيح لك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك مع Facebook

للحصول على القائمة الكاملة للحزم المعترف بها رسميًا ، تحقق من meteorrn github org.

التوافق

هذه الحزمة متوافقة مع الإصدارات الأصلية React من 0.60.0 إلى أحدث (0.63.2)

لمستجلة React Native <0.60.0 استخدم Meteor-Meteor React.

الهجرة من react-native-meteor :

• لم يعد CorresoredFind خيارًا. جميع مكالمات .find () ستعيد المؤشرات (لمطابقة النيزك)
• تمت إزالة MeteorListView & MeteorComplexListView
• تمت إزالة CollectionFS
• تمت إزالة createContainer
• تمت إزالة mixins ( connectMeteor )
• تمت إزالة composeWithTracker

باستخدام على الويب

بينما تم تصميم هذه الحزمة مع مراعاة React Native ، فإنها قادرة أيضًا على التشغيل على الويب (باستخدام react-dom ). قد يكون هذا مفيدًا إذا كنت بحاجة إلى تطبيق ليكترون خفيف الوزن ، إذا كنت ترغب في إنشاء تطبيق عميل منفصل عن قاعدة كود الخادم ، وما إلى ذلك. التغيير الوحيد المطلوب هو توفير تطبيق غير متزامن. هنا مثال بسيط:

 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 } ) ; 

Changelog

تتضمن علامة تبويب إصدارات Github changelog الكاملة

واجهة الحزمة

لضمان أن حزم Meteorrn Companion تستخدم نفس الإصدارات من الحزم الخارجية مثل AsyncStorage مثل Core ، @meteorrn/core يوفر واجهة حزمة ، حيث يمكن للحزم المصاحبة الوصول إلى حزم معينة. حاليًا ، تقوم واجهة الحزمة بإرجاع كائن بالخصائص التالية:

• غير متزامن

استخدام واجهة الحزمة

 import Meteor from '@meteorrn/core' ;

const { AsyncStorage } = Meteor . packageInterface ( ) ;

الاختلافات من Meteor Core إلى ملاحظة:

• لا تنفذ واجهة برمجة التطبيقات هذه observeChanges (لكنها تنفذ observe )

مواضيع متقدمة

تسجيل المكتبة الداخلية

تتضمن المكتبة العديد من الفصول الداخلية والبنيات ، التي تعمل في الغالب بمفردها وبدون تأثير المستخدم.

يتطلب تصحيح المكتبة العاملة كما هو متوقع الاستماع إلى العديد من الأحداث. يوضح التالي العديد من الأحداث التي تسمح بتسجيل وتفتيش مفصل.

يمكن أن يكون التسجيل مفيدًا لتحليل تطبيقات الإنتاج وأجهزة الإنتاج حيث لا يمكن الوصول إلى وحدة التحكم

أحداث مستوى البيانات (المستوى العالي)

الطريقة الأكثر ملاءمة لتتبع الأجزاء الداخلية هي عبر Data.onChange :

 const Data = Meteor . getData ( ) ;
data . onChange ( ( event ) => console . debug ( event ) ) ;

تحت الغطاء هذا: هذا:

 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 ) ;

يمكنك أيضًا الاستماع إلى loggingIn و loggingOut و onLogin و onLoginFailure change بشكل فردي:

 const Data = Meteor . getData ( ) ;
Data . on ( 'loggingIn' , ( e ) => console . debug ( 'loggingIn' , e ) ) ;
// ... 

أحداث DDP (المستوى العالي)

 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 ) ) ;
} ) ; 

أحداث WebSocket (المستوى المنخفض)

تحاول المكتبة استخدام WebSocket الأصلي ، التي توفرها ReactNative. مع الأحداث التالية ، يمكنك ربط المراسلة ذات المستوى المنخفض مع الخادم:

• open - يفتح WebSocket بنجاح
• close - يغلق WebSocket بنجاح
• message:out - يتم إرسال رسالة إلى الخادم
• message:in - رسالة تأتي من الخادم
• error - حدث خطأ على مستوى 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 ) ) ;
} ) ; 

Websocket الخام (أدنى مستوى)

هناك إمكانية لتوصيل مستوى WebSocket بمستوى واحد عن طريق الوصول إلى المقبس الخام.

هذا محبط للغاية للإنتاج ، والاستخدام على مسؤوليتك الخاصة! لاحظ أن Data.ddp.socket يستمع إلى بعض هذه بالفعل (مثل الخطأ) وينفصلونها ولكن أيضًا مع مجموعة التنظيف وجمع القمامة بشكل صحيح. سيكون لأخطاء المقبس الخام خاصية isRaw على true .

 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 ) ; 

الحد الأدنى (المستوى المنخفض)

يمكنك ربط أحداث DB من Minimongo مباشرة:

 const Data = Meteor . getData ( ) ;
Data . db . on ( 'change' , ( e ) => console . debug ( e ) ) ;

إرسال سجلات وأخطاء إلى الخادم والخدمات الخارجية

بينما يعتمد Meteor على اتصالات WebSocket و DDP كبروتوكول ، فقد ترغب أحيانًا في إرسال البيانات عبر HTTP.

يوفر المثال التالي طريقة سهلة للاستماع إلى الأخطاء وإرسالها إلى خدمة عبر طلب 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 Meteor React Native في تطبيقه الأصلي	يستخدم StarlingRealTime Meteor React Native في تطبيق الإنتاج الخاص بهم

ليا	خطة ب شول
يستخدم Lea.online Meteor React Native في تطبيق التعلم المحمول الأصلي الخاص بهم	تستخدم Plan B Schule Meteor React Native في تطبيق الإنتاج الخاص بهم

هل تريد عرض تطبيقك باستخدام Neteor-React-Disical؟ فقط قم بإنشاء علاقات عامة لإضافة شعارك هنا.

المساهمة والصيانة

يتم الحفاظ على Meteor React Native من قبل Jan Küster وتم الحفاظ عليه سابقًا من قبل Nathaniel Dsouza المتاح للتشاور: [email protected]

نحن نقدر أي مساهمات في هذا المشروع!

إذا كان لديك مشكلة أو سؤال أو ترغب في مناقشة الأشياء ، فاستخدم رابط المشكلات الخاص بنا يساعدك في العثور على المكان المناسب لطرحه أو إخباره.

إذا كنت ترغب في المساهمة في الكود ، فمن فضلك ، تأكد من قراءة دليل المساهمة لدينا وقواعد سلوكنا.

يمكنك أن تسألنا في أي وقت ، إذا تعثرت أو أي من هذه المستندات غير واضحة لك.

رخصة

معهد ماساتشوستس للتكنولوجيا ، انظر ملف الترخيص