React NativeとiOSの相互作用の詳細な説明

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface ネイティブモジュール: NSObject <RCTBridgeModule>

@終わり

#import <Foundation/Foundation.h>
#"nativeModule.h"をインポートします

@interface ネイティブモジュール ()

@終わり

@実装ネイティブモジュール

@終わり

//上記のコードを省略 @implementation nativeModule

// このコードは、nativeModule モジュールが RN でアクセスできるようにモジュールをエクスポートするために必要です。
RCT_EXPORT_MODULE();

// 文字列を受け取る RCT_EXPORT_METHOD(addHelloWord:(NSString *)name location:(NSString *)location)
{
  NSLog(@"%@,%@", 名前、場所);
}
@終わり

'react-native' から { Button, NativeModules } をインポートします。
const { nativeModule } = ネイティブモジュール

<Button title={'2つのパラメータをネイティブに渡す'} onPress={() => {
    nativeModule.addHelloWord('あなたの名前', '場所: 浙江省')
}}/>

// 1 つのパラメータ（JavaScript コールバック関数に渡されるパラメータの配列）のみを受け入れます。
RCT_EXPORT_METHOD(checkIsRoot:(RCTResponseSenderBlock)コールバック) {
  NSArray *配列 = @[@"文字列", @"数値"];
  コールバック(配列);
}

<Button title={'js はネイティブにコールバックを渡し、コールバックで配列を受け取ります'} onPress={() => {
    nativeModule.checkIsRoot((str: 文字列, num: 文字列) => {
      コンソール.log(文字列、数値)
    })
}}/>

@interface ネイティブモジュール ()

@property (非アトミック) RCTPromiseResolveBlock normalResolve;
@property (非アトミック) RCTPromiseRejectBlock normalReject;
@property (非アトミック) NSInteger num;

@終わり


// これはタイマーです - (void)startTime: (NSArray*) data{
  NSTimer *timer = [NSTimer schedulingTimerWithTimeInterval:2 repeats:YES block:^(NSTimer * _Nonnull timer) {
    
    NSArray *events =@[@"Promise ",@"test ",@" 配列"];
    if (イベント) {
      イベントを通常の状態に戻します。
      [タイマー無効化];
    } それ以外 {
      [タイマー無効化];
      NSError *error=[NSError errorWithDomain:@"エラーメッセージを呼び出しています..." code:101 userInfo:nil];
      self.normalReject(@"no_events", @"イベントはありませんでした", error);
    }
  }];
  
  [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
}

// RNへのコールバックパラメータ、コールバックエラー情報 RCT_EXPORT_METHOD(getHBDeviceUniqueID: (RCTPromiseResolveBlock)resolve
                  拒否者:(RCTPromiseRejectBlock)拒否) {
  
  // 実行されるタスク self.normalResolve = resolve;
  自己.normalReject = 拒否;
  
  [self performSelectorOnMainThread:@selector(startTime:) withObject: [NSArray arrayWithObjects: @"1", @"2", nil] waitUntilDone:YES];
}

<Button title={'ネイティブはPromiseをJSに渡します'} onPress={() => {
    nativeModule.getHBDeviceUniqueID().then((arr: string[]) => {
      console.log('解決', arr)
    }).catch((err: 文字列) => {
      コンソール.エラー(err)
    })
}}/>

// これはタイマー2です
-(void)startTime2: (NSArray*) データ{
  NSLog(@"データ%@",データ);
  
  NSTimer *timer = [NSTimer schedulingTimerWithTimeInterval:1 repeats:YES block:^(NSTimer * _Nonnull timer) {
    
    NSLog(@"%d", (int)self.num);
    
    自己番号 = 自己番号 + 1;
    
    NSLog(@"%d", (int)self.num);
    
    （自己番号＞4）の場合{
      [タイマー無効化];
      NSLog(@"終了");
      データを通常の状態に戻します。
    }
    
  }];
  
  [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
}

// RCT_REMAP_METHOD は RCT_EXPORT_METHOD と同じですが、このメソッドは JS スレッド上の JS から同期的に呼び出され、結果を返す場合があります。
// 同期にはパフォーマンス上の問題が生じる可能性があります。RCT_REMAP_METHOD(findEvents, を使用しないことをお勧めします。
                 findEventsWithResolver:(RCTPromiseResolveBlock) 解決する
                 拒否者:(RCTPromiseRejectBlock)拒否)
{
  自己解決を通常の方法で解決します。
  自己.normalReject = 拒否;
  
  
  自己番号 = 0;
  
  [self performSelectorOnMainThread:@selector(startTime2:) withObject: [NSArray arrayWithObjects: @"1", @"2", nil] waitUntilDone:YES];
}

<Button title={'ネイティブは JS2 に Promise を渡します'} onPress={() => {
    nativeModule.findEvents().then((arr: string[]) => {
      console.log('解決', arr)
    }).catch((err: 文字列) => {
      コンソール.エラー(err)
    })
}}/>

NSArray *imageList = @[@"http://foo.com/bar1.png",
                @"http://foo.com/bar2.png"];

NSDictionary *props = @{@"images" : imageList};


RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"learn" initialProperties:props];
// このコード行はすでに存在します。違いは initialProperties:props です。

// APP を書き換えます。images は iOS によって提供されるデータです。ここではコンテキストを通じてデータを渡します。export default class App extends React.Component<{ images: string[] }> {

  与える（） {
    <NativeProps.Provider 値 = {this.props.images}> を返します。
      <AppContainer/>
    </ネイティブプロパティ.プロバイダー>
  }
}

// フックで使用するだけです const images = useContext(NativeProps);

<Text>これはネイティブ側からの初期データです {JSON.stringify(images)}</Text>

// 監視可能なイベント名 - (NSArray<NSString *> *)supportedEvents
{
  @[@"EventReminder"] を返します。
}


RCT_EXPORT_METHOD(postNotificationEvent:(NSString *)名前)
{
  NSLog(@"カレンダーイベントリマインダーを受信しました");
    [self sendEventWithName:@"EventReminder" 本文:@{@"name": name}];;
}

- (void)calendarEventReminderReceived:(NSNotification *)通知
{
  // これは公式ウェブサイトからの例です NSLog(@"calendarEventReminderReceived");
  NSString *eventName = notification.userInfo[@"name"];
  [self sendEventWithName:@"EventReminder" 本文:@{@"name": eventName}];
}

RCT_EXPORT_METHOD(送信){
  NSDictionary *dict = @{@"name" : @"veuimyzi"};
  
  NSNotification *notification = [[NSNotification alloc] initWithName:@"EventReminder" object:nil userInfo:dict];
  
  [自己カレンダーイベントリマインダー受信:通知];
}

const ManagerEmitter = 新しい NativeEventEmitter(nativeModule)

定数[メッセージ、setMsg] = useState([])

// フック内で使用。componentDidMount ライフサイクルに似ている。useEffect(() => {
    const サブスクリプション = ManagerEmitter.addListener(
      「イベントリマインダー」、
      （リマインダー）=> {
        setMsg(前の状態 => {
          prevState.concat(リマインダー.name) を返します
        })
        console.log('これは監視されたEventReminderイベント応答です', reminder.name)
      }
    ）

    戻り値 () => {
      サブスクリプション.削除()
    }
}, [])


<Button title={'js はイベントをリッスンし、ネイティブが js に通知を送信できるようにします'} onPress={() => {
    ネイティブモジュールの postNotificationEvent('テスト')
}}/>

<Button title={'js はイベントをリッスンし、ネイティブが js に通知を送信できるようにします'} onPress={() => {
    ネイティブモジュール.Send()
}}/>

{
    msg.map((項目, インデックス) => {
      <テキストキー={item + index}>item:{item}</Text>を返します
    })
}

@実装ネイティブモジュール
{
  bool リスナーがあります。
  // ローカル変数 }

-(void)観察開始{
  リスナーあり = YES;
}

-(void)観察を停止{
  リスナーあり = NO;
}
// リスナーを送信するときに判断を追加します。リスナーがある場合にのみ送信し、ブリッジコードの呼び出しを効果的に削減します。if (hasListeners) { 
    [self sendEventWithName:@"EventReminder" 本文:@{@"name": name}];;
}