React Native打包(二:react-native集成友盟)

2024-05-13 00:18

本文主要是介绍React Native打包(二:react-native集成友盟),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

(一)前言
版本环境

node 8.0+(v8.12.0)
npm 5.0+(v6.4.1)
java (v1.8.0_172)"react-native": "0.57.1","react": "16.5.0",

参考链接博客

(二). ##集成安卓环境##

  1. 在android/app/build.gradle
dependencies {....implementation "com.facebook.react:react-native:+"  // From node_modulesimplementation 'com.umeng.analytics:analytics:latest.integration' // umeng
}
  1. 如果无法正常集成请在android/build.gradle 添加如下代码 :
allprojects {repositories {google()mavenLocal()jcenter()maven {// All of React Native (JS, Obj-C sources, Android binaries) is installed from npmurl "$rootDir/../node_modules/react-native/android"}// react-native-image-crop-pickermaven { url 'https://maven.google.com' }// react-native-image-crop-pickermaven { url "https://jitpack.io" }// umeng  mavenCentral() }
}

重新build应用,Gradle就会将上述配置的sdk自动下载到本地。

  1. 配置android/app/src/main/AndroidManifest.xml
<manifest……>
……
<activity ……/><activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /><!--umeng--><meta-data android:value="YOUR_APP_KEY" android:name="UMENG_APPKEY"/><meta-data android:value="Channel ID" android:name="UMENG_CHANNEL"/>
</application>    
</manifest>
  1. 配置android/app/src/main/java/com/项目名/MainActivity.java
// umeng
import com.umeng.analytics.MobclickAgent;...
// Umeng sdk
public void onResume() {super.onResume();MobclickAgent.onResume(this);
}
public void onPause() {super.onPause();MobclickAgent.onPause(this);
}

(三). ##集成IOS环境##

  1. 在pod增加依赖
target '项目名' do# react-native-image-crop-picker setup -----># this is very important to have!rn_path = '../node_modules/react-native'pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"pod 'React', path: rn_path, subspecs: ['Core','RCTActionSheet','RCTAnimation','RCTGeolocation','RCTImage','RCTLinkingIOS','RCTNetwork','RCTSettings','RCTText','RCTVibration','RCTWebSocket','ART', # react-native-progress]
# umeng 标准SDK,含IDFA  ----->pod 'UMengAnalytics'
# <-----  标准SDK,含IDFApod 'RNImageCropPicker', :path =>  '../node_modules/react-native-image-crop-picker'
# <----- react-native-image-crop-picker setupend

然后 cd ios && pod install 安装sdk

  1. 设置配置

在AppDelegate.m文件

#import "UMMobClick/MobClick.h" // <--- import umeng - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{UMConfigInstance.appKey = @"YOUR_APP_KEY";UMConfigInstance.channelId = @"Channel ID";// UMConfigInstance.eSType = E_UM_GAME; // 仅适用于游戏场景,应用统计不用设置[MobClick setAppVersion: XcodeAppVersion]; // 配置umeng app版本[MobClick startWithConfigure:UMConfigInstance]; // 配置以上参数后调用此方法初始化SDKNSURL *jsCodeLocation;...
}

(四). ##结论##

基础环境配置完成,但是目前友盟app_key写死在配置文件中,后续多环境打包会提供方案解决

这篇关于React Native打包(二:react-native集成友盟)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/984145

相关文章

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者(Producer)配置1. 创建 Spr

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

SpringBoot集成LiteFlow工作流引擎的完整指南

《SpringBoot集成LiteFlow工作流引擎的完整指南》LiteFlow作为一款国产轻量级规则引擎/流程引擎,以其零学习成本、高可扩展性和极致性能成为微服务架构下的理想选择,本文将详细讲解Sp... 目录一、LiteFlow核心优势二、SpringBoot集成实战三、高级特性应用1. 异步并行执行2

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.