React Native Android 使用友盟SDK功能

React Native Android 使用友盟SDK功能

友盟的SDK 目前只支持到native开发，好在React Native支持扩展原生控件，

如果用react开发原生Android应用而且要使用友盟的SDK的话，只需要用Android代码写一个View，包装一个友盟功能的实现（例如反馈功能），然后把对应的View扩展为React Native的实现即可，当然前提还是要按照友盟的SDK的使用文档把lib 权限，图片资源等按照集成说明在项目中配置好。

---

下面代码实现一个实现一个Button，可以跳转到友盟反馈页面。

自定义View

public class RNUmengFeedBackView extends SimpleViewManager<TextView> {

    public static final String REACT_CLASS = "RNUmengFeedBackView";

    private TextView textView;
    private ThemedReactContext context;

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

    @Override
    protected TextView createViewInstance(final ThemedReactContext reactContext) {
        context = reactContext;
        textView = new TextView(context);
        textView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        textView.setGravity(Gravity.CENTER);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                goToFeedBack();
            }
        });
        return textView;
    }

    private void goToFeedBack() {
        FeedbackAgent agent = new FeedbackAgent(context);
        agent.startFeedbackActivity();
    }


    @ReactProp(name = "text")
    public void setText(TextView view, String text) {
        view.setText(text);
    }

    @ReactProp(name = "textSize", defaultFloat = 12f)
    public void setTextSize(TextView view, float textSize) {
        view.setTextSize(textSize);
    }

    @ReactProp(name = "textColor")
    public void setTextColor(TextView view, String textColor) {
        view.setTextColor(Color.parseColor(textColor));
    }


}

定义实现ReactPackage，包装自定义的View，这段代码的使用参考官方文档的扩展原生控件的说明。

public class CustomReactPackage implements ReactPackage {

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

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

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> result = new ArrayList<>();
        result.add(new RNUmengFeedBackView());

        return result;
    }
}

在MainActivity 上需要添加刚刚定义的View Package
.addPackage(new CustomReactPackage())

mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new RNWebViewPackage())
                .addPackage(new CustomReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

React Native 使用的代码

<RNUmengFeedBackView
                    style={styles.touchable}
                    text="反馈"
                    textSize={20}
                    textColor='#03A9F4'
                    umengFunc='feedback'/>

---

中间出现的问题及解决思路

自定义native 控件 在int等值传参时候报错，排错办法和思路，
要打开Android logcat 工具 看Android端的报错才能分析出来，
如果要求参数是int,使用的时候因为js的传参是String 例如
要用这种方式调用 ：textSize= {20} 如果用 textSize= “20”,这种方式会报错

@ReactProp(name = "textSize", defaultFloat = 12f)
    public void setTextSize(TextView view, float texs) {
        view.setTextSize(textSize);
    }

---

我的项目 kindle助手 React实现，欢迎一起讨论

---