meteor react nativeダウンロード-Meteor meteor react nativeソースコードダウンロード

流星反応ネイティブ

ReactネイティブアプリをMeteorサーバーに接続し、アカウント、リアクティブデータトラッカーなどの流星固有の機能を活用して、ReactバージョンのNativeの最新バージョンと互換性があります。

Meteor Guide・初心者ワークショップ・フルAPIドキュメント・例プロジェクト・スターターテンプレート（Expo）・より多くのパッケージとリソース

特徴

？ Meteorのモバイルアプリの「自動」機能
？セットアップと統合が簡単です
すぐにReact-Native + Meteorを使用してモバイルアプリを構築する
？ Zero-configアカウント /認証
？ Zero-configのデフォルトを使用してストレージに依存します
Meteorフォーラム、Slackまたはscordの支援コミュニティ！

インストール
- 別の非同期ストレージを使用します
- Expo Secureストアの使用
基本的な使用法
コンパニオンパッケージ
互換性
Webで使用します
Changelog
パッケージインターフェイス
- パッケージインターフェイスの使用
- Meteor Coreからの違いに注意してください：
ショーケース
貢献とメンテナンス
ライセンス

インストール

npm install --save @meteorrn/core
ピア依存関係があることを確認します@react-native-community/netinfoがインストールされています
@react-native-async-storage/async-storage@>=1.8.1インストールされていることを確認してください。博覧会を使用している場合、または@react-native-async-storage/async-storageを使用できない場合は、以下をお読みください

別の非同期ストレージを使用します

このパッケージは、デフォルトで@react-native-async-storage/async-storageを使用しています。これは、特定のReactネイティブバージョンを使用している場合、またはExpoを使用している場合に問題を引き起こす可能性があります。カスタムAsyncStorageの実装を使用するには、 Meteor.connectでオプションとして渡します。

 import { AsyncStorage } from 'react-native' ;

// ...

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

AsyncStorage APIを自分で使用している場合、Meteorrnが使用しているのと同じバージョンを使用すること、または競合するバージョンのために問題が発生する可能性があることが重要です。

Meteor（または@react-native-async-storage/async-storage ）に渡すのと同じ非同期を使用していることを確認するか、Meteorrnのパッケージインターフェイスを使用できます。

Expo Secureストアの使用

この例は、ExpoのSecure Storeの実装を非同期ストレージとして使用する方法を示しています。 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をご覧ください。

互換性

このパッケージは、0.60.0から最新（0.63.2）までのReactネイティブバージョンと互換性があります

反応ネイティブ<0.60.0の場合、React-Native-Meteorを使用します。

react-native-meteorからの移住：

CursoredFindはもはやオプションではありません。すべての.find（）呼び出しはカーソルを返します（流星に一致するため）
MeteorListView ＆ MeteorComplexListViewが削除されました
CollectionFSが削除されました
createContainerが削除されました
ミキシン（ connectMeteor ）が削除されました
composeWithTracker削除されました

Webで使用します

このパッケージは、Reactネイティブを念頭に置いて設計されていますが、Webで実行することもできます（ 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リリースタブには、完全な変更ログが含まれています

パッケージインターフェイス

MeteorrnのコンパニオンパッケージがAsyncstorageのような同じバージョンの外部パッケージをCoreとして使用するようにするために、 @meteorrn/coreパッケージインターフェイスを提供します。現在、パッケージインターフェイスは、次のプロパティを持つオブジェクトを返します。

Asyncstorage

パッケージインターフェイスの使用

 import Meteor from '@meteorrn/core' ;

const { AsyncStorage } = Meteor . packageInterface ( ) ;

Meteor Coreからの違いに注意してください：

このAPIは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イベント（低レベル）

ライブラリは、ReactNativeが提供するネイティブWebSocketを使用しようとします。次のイベントを使用すると、サーバーを使用して低レベルのメッセージに接続できます。

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

Raw WebSocket（最小レベル）

生のソケットにアクセスすることで、1つのレベルの低いレベルを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 ) ;

Minimongo（低レベル）

Minimongoから直接DBイベントに接続できます。

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

サーバーと外部サービスにログとエラーを送信します

MeteorはProtocolとしてWebSocket Connectionsと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ネイティブを使用しています	StarlingRealtimeは、生産アプリでMeteor Reactネイティブを使用しています

lea.online	プランBシュール

Lea.Onlineは、ネイティブモバイル学習アプリでMeteor Reactネイティブを使用します	Plan B Schuleは、生産アプリでMeteor Reactネイティブを使用しています

Meteor-React-Nativeを使用してアプリを紹介したいですか？ PRを作成して、ここにロゴを追加してください。

貢献とメンテナンス

Meteor ReactネイティブはJanKüsterによって維持されており、以前はNathaniel Dsouzaが相談できるようにしていました：[email protected]

このプロジェクトへの貢献に感謝します！

問題、質問、または物事について話し合いたい場合は、尋ねたり伝えたりするのに適した場所を見つけるのに役立つ問題リンクを使用してください。

コードを寄付したい場合は、貢献ガイドと行動規範を読んでください。

立ち往生しているか、これらのドキュメントのいずれかが不明である場合はいつでも尋ねることができます。

ライセンス

MIT、ライセンスファイルを参照してください

拡大する

meteor react native