Как перевести пример Java-приложения Mapbox GL Native Android Activity в NativeScript? - PullRequest
1 голос
/ 01 апреля 2019

Я пытаюсь отследить неприятную ошибку сбоев в плагине NativeScript Mapbox . На Android любое приложение, созданное с помощью этого плагина, вылетает на Resume.

Чтобы исключить ошибку в библиотеке Mapbox GL Native Android, я следовал инструкциям по установке, чтобы создать очень простое примерное приложение на Java, которое загружает и отображает карту .

Это приложение-образец не падает, независимо от того, сколько раз я делаю паузу и возобновляю.

Я заметил, что плагин NativeScript Mapbox, по-видимому, не вызывает рекомендуемые ловушки жизненного цикла Mapbox, и что в списке собственных проблем Mapbox зарегистрировано несколько сбоев, где ответом является «следуйте рекомендациям по ловушке жизненного цикла».

Поэтому моей следующей мыслью было посмотреть, смогу ли я перевести Java-код непосредственно в NativeScript, следуя рекомендуемым хукам жизненного цикла (точно так, как это делается в примере приложения). Таким образом, я смогу определить, происходит ли сбой из-за неправильного вызова хуков жизненного цикла или из-за какой-то более эзотерической проблемы NativeScript.

Рабочая активность Java:

package com.amapboxtest.mapboxtest;

import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
import com.mapbox.mapboxsdk.maps.Style;

import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.util.Log;

public class MainActivity extends AppCompatActivity {

    private MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Log.d( "test","onCreate()");

        Mapbox.getInstance(this, "MAPBOX_ACCESS_TOKEN_HERE");

        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        mapView = findViewById(R.id.mapView);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(@NonNull MapboxMap mapboxMap) {

                Log.d( "test","onMapReady()");

                mapboxMap.setStyle(Style.MAPBOX_STREETS, new Style.OnStyleLoaded() {
                    @Override
                    public void onStyleLoaded(@NonNull Style style) {

                        Log.d( "test", "onStyleLoaded()");

                    // Map is set up and the style has loaded. Now you can add data or make other map adjustments


                    }
                });
            }
        });

    }

    @Override
    public void onStart() {

        Log.d( "test", "onStart()");

        super.onStart();
        mapView.onStart();
    }

    @Override
    public void onResume() {

        Log.d( "test", "onResume");

        super.onResume();
        mapView.onResume();
    }

    @Override
    public void onPause() {
        Log.d( "test", "onPause");

        super.onPause();
        mapView.onPause();
    }

    @Override
    public void onStop() {

        Log.d( "test", "onStop");

        super.onStop();
        mapView.onStop();
    }

    @Override
    public void onLowMemory() {

        Log.d( "test", "onLowMemory()");

        super.onLowMemory();
        mapView.onLowMemory();
    }

    @Override
    protected void onDestroy() {

        Log.d( "test","onDestroy");

        super.onDestroy();
        mapView.onDestroy();
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {

        Log.d( "test", "onSaveInstanceState()");

        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
} 

Моя первая попытка перевода на NativeScript:

/**
*
* @link https://github.com/NativeScript/android-runtime/issues/981
*/

import {setActivityCallbacks, AndroidActivityCallbacks} from "tns-core-modules/ui/frame";

import * as application from "tns-core-modules/application";

declare const com, java, org;

@JavaProxy("com.amapboxtest.MainActivity")
class Activity extends android.support.v7.app.AppCompatActivity {
    public isNativeScriptActivity;

    private _callbacks: AndroidActivityCallbacks;

    private mapView: any;

    public onCreate(savedInstanceState: android.os.Bundle): void {

      console.log( "Activity::onCreate()" );

      this.isNativeScriptActivity = true;

      if (!this._callbacks) {
        setActivityCallbacks(this);
      }

      this._callbacks.onCreate(this, savedInstanceState, super.onCreate );

      console.log( "Activity::onCreate(): after _callbacks.onCreate()" );

      let layout;
      let resourceId;

      console.log( "Activity::onCreate(): before getting layout" );

      // this fails.

      try {
        layout = this.getResources().getIdentifier( "activity_main", "layout", this.getPackageName() );
      } catch( e ) {
        console.error( "Unable to get layout:", e );
        throw e;
      }

      this.setContentView(layout);

      console.log( "Activity::onCreate(): before getting resourceId" );

      try {
        resourceId = this.getResources().getIdentifier( "mapView", "id", this.getPackageName() );
      } catch( e ) {
        console.error( "Unable to get resourceId:", e );
        throw e;
      }

      this.mapView = this.findViewById( resourceId );

      console.log( "Activity::onCreate(): after findViewById()" );

      this.mapView.onCreate( savedInstanceState ); 

      console.log( "Activity::onCreate(): after this.mapView.onCreate( savedInstanceState" );

      com.mapbox.mapboxsdk.Mapbox.getInstance( application.android.context, 'SET_ACCESS_TOKEN_HERE' );

      console.log( "Activity::onCreate(): after getInstance()" );

      // modelled after mapbox.android.ts in the Nativescript-Mapbox plugin.

      this.mapView.getMapAsync(
        new com.mapbox.mapboxsdk.maps.OnMapReadyCallback({
          onMapReady: mapboxMap => {

            console.log( "onMapReady()");

            this.mapView.addOnDidFinishLoadingStyleListener(
              new com.mapbox.mapboxsdk.maps.MapView.OnDidFinishLoadingStyleListener({
                onDidFinishLoadingStyle : style => {

                  console.log( "style loaded" );

                }
              })
            );

            let builder = new com.mapbox.mapboxsdk.maps.Style.Builder();

            const Style = com.mapbox.mapboxsdk.constants.Style;

            mapboxMap.setStyle( 
              builder.fromUrl( Style.LIGHT )
            );
          } 
        })
      );

    } // end of onCreate()

    // -------------------------------------------------------

    public onSaveInstanceState(outState: android.os.Bundle): void {

        console.log( "Activity::onSaveInstanceState()" );

        this._callbacks.onSaveInstanceState(this, outState, super.onSaveInstanceState);

        this.mapView.onSaveInstanceState( outState );

    }

    // -------------------------------------------------------

    public onStart(): void {

        console.log( "Activity::onStart()" );

        this._callbacks.onStart(this, super.onStart);

        this.mapView.onStart();
    }

    // -------------------------------------------------------

    public onStop(): void {

        console.log( "Activity::onStop()" );

        this._callbacks.onStop(this, super.onStop);

        this.mapView.onStop();
    }

    // -------------------------------------------------------

    public onDestroy(): void {

        console.log( "Activity::onDestroy()" );

        this._callbacks.onDestroy(this, super.onDestroy);

        this.mapView.onDestroy();
    }

    // -------------------------------------------------------

    public onBackPressed(): void {

        console.log( "Activity::onBackPressed()" );

        this._callbacks.onBackPressed(this, super.onBackPressed);
    }

    // -------------------------------------------------------

    public onRequestPermissionsResult(requestCode: number, permissions: Array<string>, grantResults: Array<number>): void {

        console.log( "Activity::onCRequestPermissionResult()" );

        this._callbacks.onRequestPermissionsResult(this, requestCode, permissions, grantResults, undefined /*TODO: Enable if needed*/);
    }

    // -------------------------------------------------------

    public onActivityResult(requestCode: number, resultCode: number, data: android.content.Intent): void {

        console.log( "Activity::onActivityResult()" );

        this._callbacks.onActivityResult(this, requestCode, resultCode, data, super.onActivityResult);
    }
}

// END

Я скопировал зависимости gradle из приложения Java и добавил их в App_Resources / Android / app.gradle.

Я также скопировал файлы app / src / main / res / layout / activity_main.xml и content_main.xml.

Первоначально, это приведет к ошибке в content_main.xml, потому что, по-видимому, android.support.constraint.ConstraintLayout не поддерживается Nativescript. Итак, основываясь на том, что я вижу в плагине NativeScript Mapbox, я изменил его на android.widget.FrameLayout. Я проверил это в приложении Java, и, кажется, работает.

Однако теперь я застрял в исключительной ситуации времени выполнения, которую я не понимаю:

System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.amapboxtest.nsmapboxtest/com.amapboxtest.MainActivity}: com.tns.NativeScriptException: 
System.err: Calling js method onCreate failed
System.err: 
System.err: Error: android.view.InflateException: Binary XML file line #9: Binary XML file line #12: Error inflating class com.mapbox.mapboxsdk.maps.MapView
System.err: Caused by: android.view.InflateException: Binary XML file line #12: Error inflating class com.mapbox.mapboxsdk.maps.MapView
System.err: Caused by: java.lang.reflect.InvocationTargetException
System.err:     java.lang.reflect.Constructor.newInstance0(Native Method)
System.err:     java.lang.reflect.Constructor.newInstance(Constructor.java:334)
System.err:     android.view.LayoutInflater.createView(LayoutInflater.java:647)

Он умирает в этой строке в Деятельности:

layout = this.getResources().getIdentifier( "activity_main", "layout", this.getPackageName() );

NativeScript, по-видимому, не предоставляет R.id, поэтому вызовы getResources ().

Я очень новичок в разработке NativeScript и нативных Android, и мне нужно больше погружаться в сорняки, чем мне бы хотелось, но мне нужно решить эту проблему, а следующий простой перевод - это следующий важный шаг.

Будем весьма благодарны за любые указания относительно того, что я делаю неправильно при переводе этого примера на NativeScript. Я должен представить, что есть что-то простое, что мне не хватает.

Я поместил и рабочий пример Java, и сломанный пример NativeScript на Github.

Java MapboxTest Repository

Репозиторий NativeScript NsMapboxTest

1 Ответ

1 голос
/ 01 апреля 2019

У нас нет activity_main.xml в NativeScript. Ваш пользовательский интерфейс построен с использованием компонентов NativeScript с использованием XML / JavaScript. Чтобы инициализировать пользовательский интерфейс, вы должны сделать this , как в исходной реализации, в противном случае вы потеряете все основные функции навигации, предоставляемые в рамках.

 appModule.android.init(this.getApplication());

Затем вы можете прослушать событие активности onCreate в своем корневом компоненте, где вы разместили представление mapbox, использовать getViewById для получения ссылки, а затем получить доступ к свойству nativeView, чтобы получить фактическое собственное представление mapbox.

...