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实现，欢迎一起讨论