Skip to content

native-modules-intro.md

Latest commit

 

History

History
25 lines (15 loc) · 2.7 KB

native-modules-intro.md

File metadata and controls

25 lines (15 loc) · 2.7 KB
id native-modules-intro
title はじめてのネイティブモジュール

React Native でアプリを作っていると、JavaScript 向けの API が標準で提供されていない、各プラットフォームのネイティブな API にアクセスしたくなることがあります。Apple Pay や Android Pay にアクセスするためのネイティブな API はその一例です。きっと皆さんは、Objective-C や Swift、Java、C++などで実装された既存のライブラリを再利用したいでしょうし、それらを JavaScript で再実装するのは避けたいことでしょう。あるいは、画像処理などのために、ハイパフォーマンスかつマルチスレッドなコードをいくらか書きたいこともあるでしょう。

The NativeModule system exposes instances of Java/Objective-C/C++ (native) classes to JavaScript (JS) as JS objects, thereby allowing you to execute arbitrary native code from within JS. While we don't expect this feature to be part of the usual development process, it is essential that it exists. If React Native doesn't export a native API that your JS app needs you should be able to export it yourself!

Native Module Setup

There are two ways to write a native module for your React Native application:

  1. Directly within your React Native application’s iOS/Android projects
  2. As a NPM package that can be installed as a dependency by your/other React Native applications

This guide will first walk you through implementing a native module directly within a React Native application. However the native module you build in the following guide can be distributed as an NPM package. Check out the Setting Up a Native Module as a NPM Package guide if you are interested in doing so.

Getting Started

In the following sections we will walk you through guides on how to build a native module directly within a React Native application. As a prerequisite, you will need a React Native application to work within. You can follow the steps here to setup a React Native application if you do not already have one.

Imagine that you want to access the iOS/Android native calendar APIs from JavaScript within a React Native application in order to create calendar events. React Native does not expose a JavaScript API to communicate with the native calendar libraries. However, through native modules, you can write native code that communicates with native calendar APIs. Then you can invoke that native code through JavaScript in your React Native application.

In the following sections you will create such a Calendar native module for both Android and iOS.