meteor react native
2.8.1
เชื่อมต่อแอพ React Native ของคุณเข้ากับเซิร์ฟเวอร์ Meteor ของคุณและใช้ประโยชน์จากคุณสมบัติเฉพาะของดาวตกเช่นบัญชีตัวติดตามข้อมูลปฏิกิริยา ฯลฯ เข้ากันได้กับ React Native เวอร์ชันล่าสุด
คู่มือ Meteor · การประชุมเชิงปฏิบัติการผู้เริ่มต้น · เอกสารประกอบ API เต็มรูปแบบ · ตัวอย่างโครงการ · เทมเพลตเริ่มต้น (งานแสดงสินค้า) · แพ็คเกจและทรัพยากรเพิ่มเติม
npm install --save @meteorrn/core@react-native-community/netinfo ติดตั้ง@react-native-async-storage/async-storage@>=1.8.1 ติดตั้ง หากคุณใช้งาน Expo หรือไม่สามารถใช้ @react-native-async-storage/async-storage อ่านด้านล่าง แพ็คเกจนี้ใช้ @react-native-async-storage/async-storage โดยค่าเริ่มต้น สิ่งนี้อาจทำให้เกิดปัญหาหากคุณใช้ React Native เวอร์ชันบางอย่างหรือหากคุณใช้งาน Expo หากต้องการใช้การใช้งาน asyncstorage แบบกำหนดเองให้ส่งผ่านเป็นตัวเลือกใน Meteor.connect :
import { AsyncStorage } from 'react-native' ;
// ...
Meteor . connect ( 'wss://myapp.meteor.com/websocket' , { AsyncStorage } ) ; หากคุณใช้ AsyncStorage API ด้วยตัวคุณเองสิ่งสำคัญคือคุณต้องใช้เวอร์ชันเดียวกับที่ Meteorn ใช้หรือปัญหาอาจเกิดขึ้นเนื่องจากเวอร์ชันที่ขัดแย้งกัน
ตรวจสอบให้แน่ใจว่าคุณใช้ AsyncStorage เดียวกันที่คุณส่งผ่านไปยัง Meteor (หรือ @react-native-async-storage/async-storage หากคุณไม่ผ่านอะไรเลย) หรือคุณสามารถใช้อินเทอร์เฟซแพ็คเกจของ Meteorrn
ตัวอย่างนี้แสดงวิธีใช้การใช้งาน Secure Store ของ Expo เป็นที่เก็บข้อมูล Async โปรดทราบว่าที่เก็บข้อมูลที่ปลอดภัยทั้งใน Android และ iOS มีขีด จำกัด ขนาดส่วนบนต่ำของ megabytes สองสาม megabytes
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 Native รุ่นจาก 0.60.0 ถึงล่าสุด (0.63.2)
สำหรับ React Native <0.60.0 ใช้เครื่องตรวจสอบปฏิกิริยาตอบโต้
อพยพจาก react-native-meteor :
MeteorListView & MeteorComplexListView ถูกลบออกไปCollectionFS ถูกลบออกแล้วcreateContainer ถูกลบออกแล้วconnectMeteor ) ถูกลบออกcomposeWithTracker ถูกลบออก ในขณะที่แพ็คเกจนี้ได้รับการออกแบบโดยคำนึงถึง React Native แต่ก็มีความสามารถในการทำงานบนเว็บ (โดยใช้ react-dom ) สิ่งนี้จะมีประโยชน์หากคุณต้องการการใช้งาน Meteor น้ำหนักเบาหากคุณต้องการสร้างแอพไคลเอนต์แยกออกจากเซิร์ฟเวอร์ Codebase ของคุณ ฯลฯ การเปลี่ยนแปลงที่จำเป็นเพียงอย่างเดียวคือการให้การใช้งาน asyncStorage นี่คือตัวอย่างง่ายๆ:
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 } ) ; แท็บ GitHub Releases รวมถึงการเปลี่ยนแปลงเต็มรูปแบบ
เพื่อให้แน่ใจว่าแพ็คเกจ Meteorrn Companion ใช้แพ็คเกจภายนอกรุ่นเดียวกันเช่น AsyncStorage เป็น Core, @meteorrn/core จัดเตรียมอินเทอร์เฟซแพ็คเกจซึ่งแพ็คเกจสหายสามารถเข้าถึงแพ็คเกจบางอย่างได้ ปัจจุบันอินเทอร์เฟซแพ็คเกจส่งคืนวัตถุด้วยคุณสมบัติต่อไปนี้:
import Meteor from '@meteorrn/core' ;
const { AsyncStorage } = Meteor . packageInterface ( ) ;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 ) ) ;
// ... 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 ดั้งเดิมซึ่งจัดทำโดย 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 หนึ่งระดับที่ต่ำกว่าโดยการเข้าถึงซ็อกเก็ตดิบ
นี่คือความท้อแท้อย่างมากสำหรับการผลิตใช้ความเสี่ยงของคุณเอง! โปรดทราบว่า 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 | แผน B Schule |
|---|---|
| Lea.online ใช้ Meteor React Native ในแอพการเรียนรู้มือถือดั้งเดิมของพวกเขา | Plan B Schule ใช้ Meteor React Native ในแอพการผลิตของพวกเขา |
ต้องการแสดงแอปของคุณโดยใช้ Meteor-React-Natial หรือไม่? เพียงสร้าง PR เพื่อเพิ่มโลโก้ของคุณที่นี่
Meteor React Native ได้รับการดูแลโดย Jan Küsterและเคยได้รับการดูแลโดย Nathaniel Dsouza ซึ่งพร้อมให้คำปรึกษา: [email protected]
เราขอขอบคุณที่มีส่วนร่วมในโครงการนี้!
หากคุณมีปัญหาคำถามหรือต้องการหารือเกี่ยวกับสิ่งต่าง ๆ ให้ใช้ลิงก์ปัญหาของเราที่จะช่วยให้คุณค้นหาจุดที่เหมาะสมในการถามหรือบอก
หากคุณต้องการมีส่วนร่วมในรหัสโปรดตรวจสอบให้แน่ใจว่าคุณได้อ่านคู่มือการบริจาคของเราและจรรยาบรรณของเรา
คุณสามารถถามเราได้ตลอดเวลาหากคุณติดอยู่หรือเอกสารใด ๆ เหล่านี้ไม่ชัดเจนสำหรับคุณ
MIT, ดูไฟล์ใบอนุญาต
