Tạo thành phần Giao diện người dùng tùy chỉnh cho android trên React Native không thành công. Ứng dụng bị treo

Question

Vì nút Đăng nhập Facebook có sẵn tự nhiên, tôi muốn có một thành phần trình bao bọc React Native cho Android. Vì vậy, tôi đã cố gắng viết nó. Nhưng ứng dụng bị treo ngay cả trước khi bắt đầu. kho github của tôi là: https://github.com/lalith26/react-native-fb-login-android

Tôi đã làm như sau:

1. Tôi tạo ra Manager cho widget LoginButton facebook:

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

2. Tôi đã tạo một gói ReactPackage mở rộng MainReactPackage:

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

3. tôi thêm ReactPackage mới trong MainActivity:

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

4. tôi bao gồm các gradle sự phụ thuộc cho đăng nhập facebook sdk

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

5. tôi đã thực hiện thành phần JS gói các phần Quê quán:

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

6. Cuối cùng tôi đã sử dụng các thành phần JS:

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

tôi đọc qua các trang web và thấy rằng propTypes là mandato ry được thông qua. Tôi đã thử điều đó. Nhưng ứng dụng bị treo khi bắt đầu. Tôi không thể xem bất kỳ nhật ký nào. Vì vậy, tôi không thể tìm ra lý do thực sự cho vấn đề này. Tôi đã thử cùng một loạt các bước cho một nút và nó hoạt động tốt.

Có điều gì đó tôi đơn giản làm sai. Xin hãy giúp ..

Tôi có quyền truy cập vào nhật ký của trình giả lập thông qua logcat. Nó cho thấy:

E/AndroidRuntime (2550): Quy trình: com.fbloginbutton2, PID: 2550 E/AndroidRuntime (2550): java.lang.ExceptionInInitializerError E/AndroidRuntime (2550): tại com. fbloginbutton2.FBLoginButtonManager.createViewInstance (FBLoginButtonManager.java:29) E/AndroidRuntime (2550): tại com.fbloginbutton2.FBLoginButtonManager.createViewInstance (FBLoginButtonManager.java:15) E/AndroidRuntime (2550): tại com.facebook. react.uimanager.ViewManager.createView (ViewManager.java:41) E/AndroidRuntime (2550): tại com.facebook.react.uimanager.Nati veViewHierarchyManager.createView (NativeViewHierarchyManager.java:172) E/AndroidRuntime (2550): tại com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation.execute (UIViewOperationQueue.java:137) E/AndroidRuntime (2550): tại com. facebook.react.uimanager.UIViewOperationQueue $ 1.run (UIViewOperationQueue.java:574) E/AndroidRuntime (2550): tại com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:622) E/AndroidRuntime (2550): tại com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame (GuardedChoreographerFrameCallback.java:32) E/AndroidRuntime (2550): tại com.facebook.react.uimanager.ReactChoreographer $ ReactChoreogra pherDispatcher.doFrame (ReactChoreographer.java:114) E/AndroidRuntime (2550): tại android.view.Choreographer $ CallbackRecord.run (Choreographer.java:765) E/AndroidRuntime (2550): tại android.view. Choreographer.doCallbacks (Choreographer.java WEBC80) E/AndroidRuntime (2550): tại android.view.Choreographer.doFrame (Choreographer.javaareness49) E/AndroidRuntime (2550): tại android.view.Choreographer $ FrameDisplayEventReceiver.run (Choreographer.java:753) E/AndroidRuntime (2550): tại android.os.Handler.handleCallback (Handler.java:739) E/AndroidRuntime ( 2550): tại android.os.Handler.dispatchMessage (Handler.java:95) E/AndroidRuntime (2 550): tại android.os.Looper.loop (Looper.java:135) E/AndroidRuntime (2550): tại android.app.ActivityThread.main (ActivityThread.java:5221) E/AndroidRuntime (2550): tại java.lang.reflect.Method.invoke (Native Phương thức) E/AndroidRuntime (2550): tại java.lang.reflect.Method.invoke (Method.java:372) E/AndroidRuntime ( 2550): tại com.android.internal.os.ZygoteInit $ MethodAndArgsCaller.run (ZygoteInit.java:899) E/AndroidRuntime (2550): tại com.android.internal.os.ZygoteInit.main (ZygoteInit.java:694) E/AndroidRuntime (2550): Gây ra bởi: null E/AndroidRuntime (2550): tại com.facebook.internal.Validate.sdkInitialized (Validate.java:99) E/AndroidRuntime (2550): tại com.facebook.FacebookSdk.getCallbackRequestCodeOffset (FacebookSdk.java:735) E/AndroidRuntime (2550): tại com.facebook.internal.CallbackManagerImpl $ RequestCodeOffset.toRequestCode (CallbackManagerImpl.java: 109) E/AndroidRuntime (2550): tại com.facebook.login.widget.LoginButton. (LoginButton.java:58) E/AndroidRuntime (2550): ... 21 thêm W/ActivityManager (1327):
Force com.fbloginbutton2 hoạt động hoàn thiện/.MainActivity E/EGL_emulation (1373): tid 1373: eglCreateSyncKHR (1181): lỗi 0x3004 (EGL_BAD_ATTRIBUTE)

Answer 1

bạn có thể có một cái nhìn tại này PR tài liệu cập nhật https://github.com/facebook/react-native/pull/3078/files

cũng như vấn đề này https://github.com/facebook/react-native/issues/2856

Answer 2

tôi thấy nó rất khó để tìm thấy một ví dụ đơn giản hoặc tài liệu về vấn đề này, vì vậy đây là một ví dụ của mã của tôi, mở rộng KenBurnsView (https://github.com/flavioarfaria/KenBurnsView), tôi hy vọng ví dụ này rất đơn giản và hữu ích:

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(); 
    } 
} 

cập nhật 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(); 

Cập nhật 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); 

Vậy là xong, bây giờ bạn có thể thêm các thành phần tùy chỉnh KenBurnsView mới, ví dụ:

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