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 {

    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 createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        List 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'/>

React Native Android 使用友盟SDK功能_第1张图片


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

自定义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实现,欢迎一起讨论


你可能感兴趣的:(react,native)