Tworzenie niestandardowego składnika interfejsu użytkownika dla systemu Android przy użyciu polecenia Natywna reakcja na niepowodzenie. Awaria aplikacji

Question

Ponieważ przycisk logowania na Facebooku jest dostępny natywnie, chciałem mieć komponent opakowania typu react dla Androida. Więc próbowałem to napisać. Ale aplikacja ulega awarii nawet przed startem. Moja GitHub repozytorium: https://github.com/lalith26/react-native-fb-login-android

Zrobiłem następujące:

1. stworzyłem Manager for widget LoginButton Facebooku:

https://github.com/lalith26/react-native-fb-login-android/blob/master/android/app/src/main/java/com/fbloginbutton2/FBLoginButtonManager.java

2. Stworzyłem pakiet ReactPackage rozszerzający MainReactPackage:

https://github.com/lalith26/react-native-fb-login-android/blob/master/android/app/src/main/java/com/fbloginbutton2/FBLoginButtonReactPackage.java

3. Po dodaniu nowej ReactPackage w główną działalność:

https://github.com/lalith26/react-native-fb-login-android/blob/master/android/app/src/main/java/com/fbloginbutton2/MainActivity.java#L29

4. I obejmowały Gradle Zależność dla logowania do Facebooka sdk

https://github.com/lalith26/react-native-fb-login-android/blob/master/android/app/build.gradle#L28

5. że wykonany składnik JS owijanie składnik Naturalny:

https://github.com/lalith26/react-native-fb-login-android/blob/master/fblogin.js

6. końcu stosowany składnik JS:

https://github.com/lalith26/react-native-fb-login-android/blob/master/index.android.js#L21

czytam za pośrednictwem internetu i okazało się, że propTypes są mandato ry do przejścia. Próbowałem też. Ale aplikacja ulega awarii na samym początku. Nie widzę żadnych dzienników. Tak więc nie jestem w stanie znaleźć rzeczywistego powodu problemu. Próbowałem tego samego zestawu kroków dla przycisku i działało dobrze.

Czy jest coś, co po prostu robię źle. Proszę pomóc ..

Mam dostęp do dzienników emulatora poprzez logcat. Pokazuje on:

E/Android Runtime (2550) Sposób: com.fbloginbutton2 PID: 2550 E/Android Runtime (2550) java.lang.ExceptionInInitializerError E/Android Runtime (2550) w com. fbloginbutton2.FBLoginButtonManager.createViewInstance (FBLoginButtonManager.java:29) E/Android Runtime (2550) w com.fbloginbutton2.FBLoginButtonManager.createViewInstance (FBLoginButtonManager.java:15) E/Android Runtime (2550) w com.facebook. react.uimanager.ViewManager.createView (ViewManager.java:41) E/AndroidRuntime (2550): at com.facebook.react.uimanager.Nati veViewHierarchyManager.createView (NativeViewHierarchyManager.java:172) E/Android Runtime (2550): co com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation.execute (UIViewOperationQueue.java:137) E/Android Runtime (2550): co com. facebook.react.uimanager.UIViewOperationQueue $ 1.run (UIViewOperationQueue.java:574) E/Android Runtime (2550): co com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:622) E/Android Runtime (2550): co com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame (GuardedChoreographerFrameCallback.java:32) E/Android Runtime (2550): co com.facebook.react.uimanager.ReactChoreographer $ ReactChoreogra pherDispatcher.doFrame (ReactChoreographer.java:114) E/Android Runtime (2550): co android.view.Choreographer $ CallbackRecord.run (Choreographer.java:765) E/Android Runtime (2550): co android.view. Choreographer.doCallbacks (Choreographer.java:580) E/AndroidRuntime (2550): at android.view.Choreographer.doFrame (Choreographer.java:549) E/AndroidRuntime (2550): at android.view.Choreographer $ FrameDisplayEventReceiver.run (Choreographer.java:753) E/AndroidRuntime (2550): at android.os.Handler.handleCallback (Handler.java:739) E/AndroidRuntime ( 2550): na android.os.Handler.dispatchMessage (Handler.java:95) E/AndroidRuntime (2 550): na android.os.Looper.loop (Looper.java:135) E/AndroidRuntime (2550): at android.app.ActivityThread.main (ActivityThread.java:5221) E/AndroidRuntime (2550): na java.lang.reflect.Method.invoke (Metoda rodzima ) E/AndroidRuntime (2550): at java.lang.reflect.Method.invoke (Method.java:372) E/AndroidRuntime ( 2550): at com.android.internal.os.ZygoteInit $ MethodAndArgsCaller.run (ZygoteInit.java:899) E/AndroidRuntime (2550): at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:694) E/AndroidRuntime (2550): Spowodowane przez: null E/AndroidRuntime (2550): at com.facebook.internal.Validate.sdkInitialized (Validate.java:99) E/Android Runtime (2550): co com.facebook.FacebookSdk.getCallbackRequestCodeOffset (FacebookSdk.java:735) E/Android Runtime (2550): co com.facebook.internal.CallbackManagerImpl $ RequestCodeOffset.toRequestCode (CallbackManagerImpl.java: 109) E/AndroidRuntime (2550): pod adresem com.facebook.login.widget.LoginButton. (LoginButton.java:58) E/AndroidRuntime (2550): ... 21 więcej W/ActivityManager (1327):
Siła aktywność wykańczania com.fbloginbutton2/.MainActivity E/EGL_emulation (1373): tid 1373: eglCreateSyncKHR (1181): error 0x3004 (EGL_BAD_ATTRIBUTE)

Answer 1

można przyjrzeć się tej zaktualizowanej dokumentacji PR https://github.com/facebook/react-native/pull/3078/files

jak również ten problem https://github.com/facebook/react-native/issues/2856

Answer 2

Znalazłem to bardzo trudno znaleźć prosty przykład lub dokumentacji na ten temat, więc tutaj jest przykładem mojego kodu, rozszerzając KenBurnsView (https://github.com/flavioarfaria/KenBurnsView), mam nadzieję, że ten przykład jest prosty i pomocny:

KenBurnsViewManager.Java:

import com.flaviofaria.kenburnsview.KenBurnsView; 

import com.facebook.react.uimanager.SimpleViewManager; 
import com.facebook.react.uimanager.ThemedReactContext; 
import com.facebook.react.uimanager.ReactProp; 

import java.io.InputStream; 

import android.graphics.drawable.Drawable; 
import android.util.Log; 

public class KenBurnsViewManager extends SimpleViewManager<KenBurnsView> { 

    public static final String REACT_CLASS = "KenBurnsView"; 
    private ThemedReactContext ctx; 

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

    @Override 
    protected KenBurnsView createViewInstance(ThemedReactContext context) { 
    ctx = context; 
    return new KenBurnsView(context); 
    } 

    @ReactProp(name = "source") 
    public void setSource(KenBurnsView view, String source) { 
    try { 
     InputStream ims = ctx.getAssets().open("images/" + source); 
     Drawable d = Drawable.createFromStream(ims, null); 
     view.setImageDrawable(d); 
    } catch (Exception ex) { 
     Log.e("KenBurnsView", "setSource", ex); 
    } 
    } 
} 

KenBurnsViewPackage.Java:

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

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

public class KenBurnsViewPackage implements ReactPackage { 
    @Override 
    public List<NativeModule> createNativeModules(
     ReactApplicationContext reactContext) { 

     List<NativeModule> modules = new ArrayList<>(); 

     return modules; 
    } 

    @Override 
    public List<ViewManager> createViewManagers(
      ReactApplicationContext reactContext) { 
     return Arrays.<ViewManager>asList(
      new KenBurnsViewManager() 
     ); 
    } 

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

aktualizacja MainActivity.Java:

mReactInstanceManager = ReactInstanceManager.builder() 
       .setApplication(getApplication()) 
       .setBundleAssetName("index.android.bundle") 
       .setJSMainModuleName("index.android") 
       .addPackage(new MainReactPackage()) 
       .addPackage(new KenBurnsViewPackage()) // <- add package 
       .setUseDeveloperSupport(BuildConfig.DEBUG) 
       .setInitialLifecycleState(LifecycleState.RESUMED) 
       .build(); 

Aktualizacja android/app/build.gradle:

dependencies { 
    compile fileTree(dir: "libs", include: ["*.jar"]) 
    compile "com.android.support:appcompat-v7:23.0.1" 
    compile "com.facebook.react:react-native:0.16.+" 
    compile "com.flaviofaria:kenburnsview:1.0.6" 
} 

KenBurnsView. js:

var { requireNativeComponent, PropTypes, View } = require('react-native'); 

var iface = { 
    propTypes: { 
    ...View.propTypes, 
    source: PropTypes.string, 
    }, 
}; 

module.exports = requireNativeComponent('KenBurnsView', iface); 

To wszystko, teraz można dodać nowy element niestandardowy KenBurnsView, na przykład:

var KenBurnsView = require('./KenBurnsView'); 
. 
. 
. 
<KenBurnsView source={'image.jpg'} style={{width:null, height: 300}}/>