ReactNative

ReactNative_ AOS 커스텀 RCTEmitter 생성 및 적용

JunsC 2024. 3. 5. 22:18
728x90

안드로이드에서도 알람앱의 기능 중 하나인 흔들기 기능을 추가해야 했다. 흔들기 기능을 모듈화해서 ReactNative 코드 안에서 직접 사용해야 했다. 그래서 우선 흔들기 기능을 따로 모듈화코드로 java 클래스로 우선 만든다

 

public class ShakeDetectorModule extends ReactContextBaseJavaModule implements SensorEventListener {


    private final String MODULE_NAME = "ShakeDetector";
    private final float SHAKE_THRESHOLD_GRAVITY = 2.7F;
    private final int SHAKE_SLOP_TIME_MS = 500;
    private final int SHAKE_COUNT_RESET_TIME_MS = 3000;
    private long mShakeTimestamp;
    private int mShakeCount;
    private SensorManager mSensorManager;
    private Sensor mAccelerometer;


    public ShakeDetectorModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mSensorManager = (SensorManager) reactContext.getSystemService(Context.SENSOR_SERVICE);
        if (mSensorManager != null) {
            mAccelerometer = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
        }
    }

    @Override
    public String getName() {
        return MODULE_NAME;
    }


    @ReactMethod
    public void startShakeDetection() {
        if (mAccelerometer != null) {
            mSensorManager.registerListener(this, mAccelerometer, SensorManager.SENSOR_DELAY_NORMAL);
        }
    }

    @ReactMethod
    public void stopShakeDetection() {
        mSensorManager.unregisterListener(this);
    }

    private void sendShakeEvent(boolean isShake) {
        getReactApplicationContext()
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("onShake", isShake);
    }


    @Override
    public void onAccuracyChanged(Sensor sensor, int accuracy) {
    }


    @Override
    public void onSensorChanged(SensorEvent event) {
        float x = event.values[0];
        float y = event.values[1];
        float z = event.values[2];
        float gX = x / SensorManager.GRAVITY_EARTH;
        float gY = y / SensorManager.GRAVITY_EARTH;
        float gZ = z / SensorManager.GRAVITY_EARTH;
        float gForce = (float) Math.sqrt(gX * gX + gY * gY + gZ * gZ);
        if (gForce > SHAKE_THRESHOLD_GRAVITY) {
            final long now = System.currentTimeMillis();
            if (mShakeTimestamp + SHAKE_SLOP_TIME_MS > now) {
                return;
            }
            if (mShakeTimestamp + SHAKE_COUNT_RESET_TIME_MS < now) {
                mShakeCount = 0;
            }
            mShakeTimestamp = now;
            mShakeCount++;
            sendShakeEvent(true);
        } else {
            sendShakeEvent(false);
        }
    }
}

 

 

이렇게 우선 만들고 


public class AlarmPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new AlarmReceiverModule(reactContext));
        modules.add(new ShakeDetectorModule(reactContext));
        return modules;
    }

    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

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

 

에다가 새로운 생성자로 넣어주고 

 

ReactNative에서는 

 

/**
* 안드로이드 흔들기 시작
*/
export const startShakeInit = () => {
NativeModules.ShakeDetector.startShakeDetection();
};
/**
* 안드로이드 흔들기 종료
*/
export const stopShakeInit = () => {
NativeModules.ShakeDetector.stopShakeDetection();
};

 

이렇게 선언해주고 사용하면 된다.

 

끝!!

728x90
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."