首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Android上的React Native中包含和读取源映射文件

在Android上的React Native中包含和读取源映射文件,可以通过以下步骤实现:

  1. 首先,确保你的React Native项目已经配置了源映射文件。源映射文件(source map)是一种用于将压缩后的代码映射回原始源代码的文件。它通常与压缩后的JavaScript文件一起生成。
  2. 在React Native项目的根目录下,找到android/app/build.gradle文件,并在android闭包内添加以下代码:
代码语言:txt
复制
project.ext.react = [
    entryFile: "index.js",
    bundleAssetName: "index.android.bundle",
    bundleInDebug: true, // 设置为true以在调试模式下包含源映射文件
    devDisabledInDebug: false, // 设置为false以在调试模式下启用开发者菜单
]

// 添加以下代码
def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = true

// ...

// 添加以下代码
project.ext.react = [
    bundleAssetName: "index.android.bundle",
    bundleInDebug: true,
    bundleInRelease: true,
    devDisabledInDebug: false,
    devDisabledInRelease: true, // 设置为true以在发布模式下禁用开发者菜单
    enableHermes: false, // 如果使用Hermes引擎,请将其设置为true
    enableSeparateBuildPerCPUArchitecture: enableSeparateBuildPerCPUArchitecture,
    hermesCommand: "../../node_modules/hermes-engine/%OS-BIN%/hermesc", // 如果使用Hermes引擎,请根据操作系统设置正确的路径
    jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
    jsBundleDirRelease: "$buildDir/intermediates/assets/release",
    jsBundleFile: "$buildDir/intermediates/assets/debug/index.android.bundle",
    jsBundleLoader: "com.facebook.react.bridge.JSBundleLoader$FileLoader",
    jsMainModuleName: "index",
    optimizeEnabled: enableProguardInReleaseBuilds,
    packageEncoding: "utf-8",
    packageObfuscationEnabled: enableProguardInReleaseBuilds,
    resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
    resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
    shrinkResources: enableProguardInReleaseBuilds,
    souceMapFile: "$buildDir/intermediates/assets/debug/index.android.bundle.map", // 设置源映射文件的路径
]
  1. 然后,在React Native项目的根目录下,找到android/app/src/main/java/com/[your-app-namespace]/MainApplication.java文件,并添加以下代码:
代码语言:txt
复制
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

// 添加以下代码
import com.facebook.react.modules.debug.SourceMapLoader;
import com.facebook.react.modules.debug.Systrace;
import com.facebook.react.modules.debug.interfaces.DeveloperSettings;
import com.facebook.react.modules.debug.interfaces.PackagerStatusCallback;
import com.facebook.react.packagerconnection.RequestHandler;
import com.facebook.react.packagerconnection.RequestHandlerRegistry;
import com.facebook.react.packagerconnection.Responder;
import com.facebook.react.shell.MainPackageConfig;
import com.facebook.react.shell.MainPackageConfig.AppBundleSupplier;
import com.facebook.react.shell.MainPackageConfig.Builder;
import com.facebook.react.shell.MainPackageConfig.Params;
import com.facebook.react.shell.MainPackageConfigProvider;
import com.facebook.react.shell.PackageConfig;
import com.facebook.react.shell.PackageConfigProvider;
import com.facebook.react.shell.PackageList;
import com.facebook.react.shell.ReactPackageLogger;
import com.facebook.react.shell.ReactPackageRegistry;
import com.facebook.react.shell.ReactPackageRegistry.Builder;
import com.facebook.react.shell.ReactPackageRegistryProvider;
import com.facebook.react.shell.ReactPackagesProvider;
import com.facebook.react.shell.ShellReactPackage;

import java.io.File;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {
    // ...

    // 添加以下代码
    private static final String SOURCE_MAP_FILE_NAME = "index.android.bundle.map"; // 源映射文件的文件名

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // ...

        // 添加以下代码
        if (BuildConfig.DEBUG) {
            enableSourceMaps();
        }
    }

    private void enableSourceMaps() {
        try {
            String sourceMapFilePath = getFilesDir().getAbsolutePath() + File.separator + SOURCE_MAP_FILE_NAME;
            File sourceMapFile = new File(sourceMapFilePath);
            if (sourceMapFile.exists()) {
                ReactInstanceManager reactInstanceManager = getReactNativeHost().getReactInstanceManager();
                DeveloperSettings devSettings = reactInstanceManager.getDevSupportManager().getDevSettings();
                devSettings.setBundleDeltasEnabled(false);
                devSettings.setBundleSourceMapPath(sourceMapFilePath);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    // ...
}
  1. 最后,在React Native项目的根目录下,运行以下命令重新构建Android应用:
代码语言:txt
复制
cd android
./gradlew clean
./gradlew assembleDebug

这样,Android上的React Native应用就可以包含和读取源映射文件了。源映射文件对于调试和错误追踪非常有用,它可以将压缩后的代码映射回原始源代码,方便开发者定位和修复bug。

推荐的腾讯云相关产品:腾讯云移动应用托管(Mobile Application Hosting),详情请参考腾讯云移动应用托管产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ReactJS到React-Native,架构原理概述

这些React-Native组件映射到渲染到App真正原生iOSAndroid UI组件,意味着你不能重用之前使用ReactJS渲染HTML, SVG或Canvas任何库。...因为 React Native 底层为 React 框架,所以如果是 UI 层变更,那么就映射为虚拟 DOM 后进行 diff 算法,diff 算法计算出变动后 JSON 映射文件,最终由 Native...层将此 JSON 文件映射渲染到原生 App 页面元素,最终实现了在项目中只需要控制 state 以及 props 变更来引起 iOS 与 Android 平台 UI 变更。...为了给React-Native组件加上样式,你需要在JavaScript添加样式表。React 宿主平台之间桥接包含了一个缩减版CSS 子集实现。...通过这些function可以得到原生事件手势状态信息,所有的touch、位置以及滑动距离,速度触摸中心等。导航React-Native提供Navigator组件。

5.3K10

ReactJS到React-Native,架构原理概述

这些React-Native组件映射到渲染到App真正原生iOSAndroid UI组件,意味着你不能重用之前使用ReactJS渲染HTML, SVG或Canvas任何库。...因为 React Native 底层为 React 框架,所以如果是 UI 层变更,那么就映射为虚拟 DOM 后进行 diff 算法,diff 算法计算出变动后 JSON 映射文件,最终由 Native...层将此 JSON 文件映射渲染到原生 App 页面元素,最终实现了在项目中只需要控制 state 以及 props 变更来引起 iOS 与 Android 平台 UI 变更。...为了给React-Native组件加上样式,你需要在JavaScript添加样式表。React 宿主平台之间桥接包含了一个缩减版CSS 子集实现。...通过这些function可以得到原生事件手势状态信息,所有的touch、位置以及滑动距离,速度触摸中心等。导航React-Native提供Navigator组件。

5.5K10

扩大Android攻击面:React Native Android应用程序分析

React Native是一款移动端应用程序框架,由于该框架允许开发人员使用React原生平台功能,目前有很多AndroidiOS应用程序都是基于该框架进行开发。...在这个文件,找到一个名为“index.android.bundle”文件,这个文件包含所有的React JavaScript代码。...映射文件 如果你能找到一个名叫“index.android.bundle.map”文件,你就可以直接分析源代码了。map文件包含了源码映射关系,可以帮助我们映射出代码识别符。...如果你要逆向分析React Native应用程序assets文件拥有这个映射文件,你就可以在该目录创建一个名为“index.html”文件来利用这个映射文件了,“index.html”文件内容如下...接下来,打开开发者工具栏,点击“Source”标签,你就可以查看到映射JavaScript文件了: 敏感凭证与节点 React Native应用程序其中一种模式是它需要使用一种第三方数据库,例如Firebase

9.7K30

React Native 混合开发(iOS篇)

React Native混合开发教程我们分为上下两篇,上篇主要介绍如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native...创建一个React Native项目 在做混合开发之前我们首先需要创建一个没有AndroidiOS模块React Native项目。...@16.3.1: npm install --save react@16.3.1 至此,一个不含AndroidiOS模块React Native项目便创建好了。...react-native init RNHybrid 上述命令会初始化一个完成名为RNHybridiOSReact Native项目,然后我们将里面的androidios目录删除,替换成已存在Android...将js bundle包图片资源导入到iOS项目中 这一步我们需要用到XCode,选择assets文件夹与main.jsbundle文件将其拖拽到XCode项目导航面板即可。 ?

8.2K50

React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南

initialLayout : 包含初始高度宽度可选对象可以被传递以防止react-native-tab-view呈现一个帧延迟; tabBarOptions: 配置TaBar下文会详细讲解;...paths: 提供routeName到path config映射,它覆盖routeConfigs设置路径。 backBehavior: 后退按钮是否会导致标签切换到初始tab?...ripple(仅支持 Android >= 5.0; pressOpacity -按下标签时不透明度(支持 iOS Android < 5.0); scrollEnabled -是否支持 选项卡滚动...大家在学习使用React Navigation3x过程遇到任何问题都可以在React Navigation3x视频教程寻找答案哈。...另外,也可以通过最新版React Native+Redux打造高质量上线App视频教程学习React Navigation开发更多实战经验技巧,以及优化思路。

12.6K20

新版React Native 混合开发(iOS篇)

React Native混合开发教程我们分为上下两篇,上篇主要介绍如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native...创建一个React Native项目 在做混合开发之前我们首先需要创建一个没有AndroidiOS模块React Native项目。...npm install --save react 至此,一个不含AndroidiOS模块React Native项目便创建好了。...react-native init RNHybrid 上述命令会初始化一个完成名为RNHybridiOSReact Native项目,然后我们将里面的androidios目录删除,替换成已存在Android...将js bundle包图片资源导入到iOS项目中 这一步我们需要用到XCode,选择assets文件夹与main.jsbundle文件将其拖拽到XCode项目导航面板即可。 ?

5.6K20

React Native构建启动屏

在这个教程,我们将演示如何在React Native构建一个启动屏幕。我们将指导你如何使用 react-native-splash-screen 为iOSAndroid应用构建出色欢迎界面。...勾选 iOS Android,然后点击生成: 接下来,解压下载文件,并将 iOS Android 文件夹复制到你克隆启动项目的 assets 目录 assets 文件夹里: 在React...将内容模式设置为“aspect fit”,如下所示: 更改iOS启动屏幕颜色 你可能会问下一个问题是“我如何在 React Native 更改启动屏幕背景颜色?”...这两个文件包含了我们为不同手机密度提供启动画面图片。...请参考下面的截图: 构建一个Expo启动屏幕 到目前为止,我们已经探讨了如何在一个裸 React Native 应用构建启动屏幕。

33410

最火移动端跨平台方案盘点:React Native、weex、Flutter

JS端通过这个 key 组合 Dom ,最后Native端会解析这个 Dom ,得到对应Native控件渲染, Android 标签对应 ViewGroup 控件。...,双方通讯通过C++保存映射,最终实现两端交互。...而bundle文件只会打包js代码,自然不会包含图片等静态资源,所以打包后静态资源,其实是被拷贝到对应平台资源文件。...打包AndroidIOS,肯定需要相应平台项目存在,在 react-native init 时创建项目,就已经包含android ios 模版工程,打包完工程会加载bundle文件,然后启动项目...3.2 实现原理 react native一样——weex 所有的标签也不是真实控件,JS 代码中所生成存 dom,最后都是由 Native 端解析,再得到对应Native控件渲染, Android

5.8K41

教你轻松在React Native中集成统计功能

在这篇文章我会向大家分享,在React Native中集成umeng统计方法及流程。...因为umeng官网有非常详细集成文档集成文档,在这里我会介绍在React NativeAndroidiOS如何集成统计功能,但不会长篇大论。...> 上述代码YOUR_APP_KEY为appkey 需要替换为您在友盟后台申请应用Appkey,Channel ID为推广渠道名称,这个可以根据需要进行自定义,:GooglePlay 最基本使用...如果大家想通过视频学习如何在React Native中集成统计功能,可以点这里查看 第三步:高级功能 在上文中我们已经完成了统计sdk集成、配置以及最基本使用(如果大家想通过视频学习如何在React...以上便是在React Native中集成umeng统计方法及流程,这样以来我们就可以在umeng后台管理查看这些统计数据了: ?

6.3K40

逆袭Flutter? Facebook 发布全新跨平台引擎 Hermes!

Android 就是 APK 大小) 内存利用率 在 Google Pixel 运行 React Native 应用 MatterMost 性能指标,可反映印度等市场中流行智能手机表现。...字节码设计使其在运行时可以映射到内存并解释,而无需急切地读取整个文件。许多中低端移动设备性能较差闪存 I/O 显著增加了延迟,因此按需从闪存加载体积经过优化字节码会显著提升 TTI。...此外,由于内存以只读方式映射并由文件支持,因此不使用虚拟内存移动操作系统( Android)可以在内存不足时清除这些页面,进而减少了内存较少设备杀掉进程现象。...尽管压缩后字节码比压缩后 JavaScript 源代码略大,但由于 Hermes 原生代码体积较小,因此 Hermes 从整体减少了 Android React Native 应用体积。...为了优化引擎大小,我们选择不支持 React Native 应用程序似乎不常用到一些语言功能,例如代理本地 eval()。完整列表可以在我们 GitHub 查阅。

1.9K40

最火移动端跨平台方案盘点

JS端通过这个 key 组合 Dom ,最后Native端会解析这个 Dom ,得到对应Native控件渲染, Android 标签对应 ViewGroup 控件。 ?...,双方通讯通过C++保存映射,最终实现两端交互。...而bundle文件只会打包js代码,自然不会包含图片等静态资源,所以打包后静态资源,其实是被拷贝到对应平台资源文件。...打包AndroidIOS,肯定需要相应平台项目存在,在 react-native init 时创建项目,就已经包含android ios 模版工程,打包完工程会加载bundle文件,然后启动项目...3.2 实现原理 react native一样——weex 所有的标签也不是真实控件,JS 代码中所生成存 dom,最后都是由 Native 端解析,再得到对应Native控件渲染, Android

4K20

React Native JSBundle拆包之原理篇

不过,熟悉RN开发者也知道,早期RN版本打出来包都只有一个jsbundle,而这个jsbundle里面包含了所有代码(RN源码、第三方库代码自己业务代码)。...如果是纯RN代码倒没什么关系,但大部分大厂都是在原生应用内接入RN,而且一个RN包含许多不同业务,这些不同业务很可能是不同部门开发,这样一个库中就有许许多多重复RN代码第三方库代码。...拆包流派 moles-packer moles-packer 是由携程框架团队研发,与携程moles框架配套使用React Native 打包拆包工具,同时支持原生 React Native 项目...那么,RN编写页面又是如何在Android系统显示呢?那就得看看RNAndroid端源码了。...* 为了使JS堆栈跟踪能够正常工作并允许映射正确地对其进行符号化,需要提供正确下载bundlesourceURL。

2.7K30

React Native 混合开发(Android篇)

React Native混合开发教程我们分为上下两篇,上篇主要介绍如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native...将React Native集成到现有的Android应用需要如下几个主要步骤: 首先,你需要有一个React Native项目; 为已存在Android应用添加React Native所需要依赖...创建一个React Native项目 在做混合开发之前我们首先需要创建一个没有AndroidiOS模块React Native项目。...@16.3.1: npm install --save react@16.3.1 至此,一个不含AndroidiOS模块React Native项目便创建好了。...react-native init RNHybrid 上述命令会初始化一个完成名为RNHybridReact Native项目,然后我们将里面的androidios目录删除,替换成已存在Android

3.9K30

新版React Native 混合开发(Android篇)

React Native混合开发教程我们分为上下两篇,上篇主要介绍如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native...将React Native集成到现有的Android应用需要如下几个主要步骤: 首先,你需要有一个React Native项目; 为已存在Android应用添加React Native所需要依赖...创建一个React Native项目 在做混合开发之前我们首先需要创建一个没有AndroidiOS模块React Native项目。...npm install --save react 至此,一个不含AndroidiOS模块React Native项目便创建好了。...react-native init RNHybrid 上述命令会初始化一个完成名为RNHybridReact Native项目,然后我们将里面的androidios目录删除,替换成已存在Android

6.4K30

React Native+React Navigation+Redux开发实用教程

为了帮助大家快速上手在React Native与Redux开发,在这本文中将向大家介绍如何在React Native中使用Redux?,以及一些必备基础以及高级知识。...那么如何在React Native中使用Reduxreact-navigation组合?呢?...在Redux+react-navigation场景处理 Android 物理返回键 在Redux+react-navigation场景处理Android物理返回键需要注意当前路由所以位置,...; 如何动态设置store,动态获取store(难点:storekey不固定); 如何实现可取消redux action:可参考SearchPage设计; 上述实战技巧可在新版React Native...; 并不是所有的state都适合放在store,这样会让store变得非常庞大,某个状态只被一个组件使用,不存在状态共享,可以不放在store; 参考 新版React Native+Redux打造高质量上线

3.9K10

AndroidReact Native开发(四、打包流程解析发布为Maven库)

而手动针对Android添加过link应该熟悉,react-native link 实际是通过脚本,在 setting.gradle 文件引入模块在node_modules原生路径,然后在 app... 从上方代码可以看出,我们直接加载 assets 目录下bundle文件index.android.bundle(当然你可以从本地或者网络加载jsbundle文件也是可以),它生成拷贝是通过react-native...这个脚本会读取一些配置路径,然后执行命令行打包拷贝需要资源,所以appbuild.gradle文件一样,在rn-librarybuild.gradle文件顶部增加引入即可,打包后,默认生成bundle...这一切都是由react native脚本执行。不过默认情况下,生成拷贝bundle文件resources资源路径,是无法被打包到aar。...aar文件本身Apk一样,其实是一个zip压缩文件,其中包含文件如下所示: /**主要文件**/ classes.jar R.txt AndroidManifest.xml res/ /**其他文件

2K40
领券