Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to manage the life cycle in react native

Tags:

react-native

I know when we need a nativeUI component we need override function getName()and createViewInstance(ThemedReactContext context) But when I use a dependence about map. The API need me use the component like this

    @Override  
protected void onDestroy() {  
    super.onDestroy();  
    //在activity执行onDestroy时执行mMapView.onDestroy(), 
    mMapView.onDestroy();  
}  
@Override  
protected void onResume() {  
    super.onResume();  
    //在activity执行onResume时执行mMapView. onResume (), 
    mMapView.onResume();  
    }  
@Override  
protected void onPause() {  
    super.onPause();  
    //在activity执行onPause时执行mMapView. onPause (),  
    mMapView.onPause();  
    }  
}

I override the function getetName()and createViewInstance(ThemedReactContext context) like this

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

@Override
public MapView createViewInstance(ThemedReactContext context) {
        final ThemedReactContext mapContext = context;
        bdMapViewInstance = new MapView(context);
        bdMapViewInstance.getMap().setOnMarkerClickListener(new BaiduMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
                ShopResponseInfo shopResponseInfo = (ShopResponseInfo) marker.getExtraInfo().getSerializable(INDENTIFY);
                if(shopResponseInfo != null){
                    String id = shopResponseInfo.getShop_id() + "";
                    String shop_name = shopResponseInfo.getShop_name() + "";
                    onReceiveNativeEvent(mapContext,bdMapViewInstance,id,shop_name);
                }
                return true;
            }
        });
    return bdMapViewInstance;

}

Finally There are some performance question in my app. I don't know whether it is affect on my app's performance. And I don't know how to meet the official suggestion. I don't know how to control the life cycle of nativeUI component for android. Very Thanks.

like image 661
RichardSleet Avatar asked Feb 05 '23 16:02

RichardSleet


2 Answers

You can listen to activity life cycle like this in your createViewInstance. You probably want to keep track of listeners and remove them appropriately based on you keep track of your instances.

LifecycleEventListener lifecycleEventListener = new LifecycleEventListener() {
  @Override
  public void onHostResume() {

  }

  @Override
  public void onHostPause() {

  }

  @Override
  public void onHostDestroy() {

  }
};
getReactApplicationContext().addLifecycleEventListener(lifecycleEventListener);
like image 104
agenthunt Avatar answered Feb 07 '23 05:02

agenthunt


An example of TestModule as explained in the docs of RN. PS Don't forget to use implements LifecycleEventListener

package com.testpackage;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.LifecycleEventListener;

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

public class TestModule extends ReactContextBaseJavaModule implements LifecycleEventListener {

    public TestModule(ReactApplicationContext reactContext) {
        super(reactContext);

        reactContext.addLifecycleEventListener(this);

    }

    @Override
    public void onHostResume() {

    }

    @Override
    public void onHostPause() {

     }

     @Override
     public void onHostDestroy() {

     }
}
like image 41
Nagibaba Avatar answered Feb 07 '23 05:02

Nagibaba