react native native module ( 네이티브 모듈 )

1) android/app/src/main/java/com/<< yourappname >>/MainApplication.java  이동

     @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
         // 여기에다가사용할 패키지를 넣어준다.
          packages.add(new MyAppPackage());
          return packages;
        }

2) MyAppPackage 클래스를 만들어준다. 그리고 implements ReactPackage 해준다.

public class MyAppPackage  implements ReactPackage {

    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        return null;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return null;
    }
}

 

3) createNativeModules에 만들 모듈을 만들어 넣어준다. 

public class MyAppPackage  implements ReactPackage {

    public MyAppPackage() {
    }

    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<NativeModule>();
        modules.add(new MyAppModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

 

4) MyAppModule 를 만들어 준다.  extends ReactContextBaseJavaModule

package com.test_native;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

public class MyAppModule  extends ReactContextBaseJavaModule {

    @NonNull
    @Override
    public String getName() {
        return null;
    }
}

 

5) 생성자가 반드시 필요 하다 .

  public MyAppModule(@Nullable ReactApplicationContext reactContext) {
        super(reactContext);
    }

 

6) 리엑트 네이티브에서 모듈에 접근할때 사용할 이름을 지정해 준다. 

   @NonNull
    @Override
    public String getName() {
        return "ToastExample";
    }

 

7)  선택적으로 메소드를 호출하는 방법중 하나이다.  상수로 이름을 지정해 놓고 사용한다. 

   @Override
    public Map<String, Object> getConstants() {
        Map<String, Object> constants = new HashMap<>();
        //constants.put("has_soft_keys", hasSoftKeys());
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

7 -1 ) react native에서  사용할 네이티브 함수를 만들어보자   리턴타입은 반드시 void 이고, @ReactMethod 를 

붙여줘야 한다. 

 

  @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message,duration).show();
    }

 

 

8) 이제  react native 에서 호출해서 사용해보자 

계속 모듈을 임포트해서 사용해야 하므로 귀찮으니 ToastExample.js  으로 js 파일을 만들어주고 그안에 임포트 시켜주자

 

import { NativeModules } from 'react-native';
module.exports = NativeModules.ToastExample;

 

9) react native 에서 사용 ~

import ToastExample from './ToastExample';

ToastExample.show('Awesome', ToastExample.SHORT);

 

 

전체 소스 

 

<MyAppModule>

package com.test_native;

import android.content.Context;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.HashMap;
import java.util.Map;

public class MyAppModule  extends ReactContextBaseJavaModule {
    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";
    Context mContext;
    public MyAppModule(@Nullable ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @NonNull
    @Override
    public String getName() {
        return "ToastExample";
    }

    @Override
    public Map<String, Object> getConstants() {
        Map<String, Object> constants = new HashMap<>();
        //constants.put("has_soft_keys", hasSoftKeys());
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message,duration).show();
    }

}

<MyAppPackage>

 

package com.test_native;

import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyAppPackage  implements ReactPackage {

    public MyAppPackage() {
    }

    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<NativeModule>();
         modules.add(new MyAppModule(reactContext));
        return modules;

    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

 

<MainApplication>

 

package com.test_native;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import com.test_native.MyAppPackage;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
         // 여기에다가사용할 패키지를 넣어준다.
          packages.add(new MyAppPackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.test_native.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}