AI 助理
备案控制台
开发者社区 ModelScope模型即服务 文章 正文

使用duxapp开发 React Native App 事半功倍

2024-09-26 45
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
模型在线服务 PAI-EAS，A10/V100等 500元 1个月
推荐场景：
基于PAI-EAS挂载OSS部署AIGC服务
模型训练 PAI-DLC，5000CU*H 3个月
推荐场景：
低代码 Lora 微调及部署
NLP自然语言处理_高级版，每接口累计50万次
简介： 对于Taro的壳子，或者原生React Native，都会存在 `android` `ios`这两个文件夹，而在duxapp中，这些文件夹的内容是自动生成的，那么对于需要在这些文件夹中修改的配置内容，例如包名、版本号、新架构开关等，都通过配置文件的方式配置了，而不需要需修改具体的文件

Taro的React Native端开发提供了两种开发方式，一种是将壳和代码分离，一种是将壳和代码合并在一起开发

duxapp中更进一步，你不需要太关注壳子什么的，你只需要安装好安卓和ios的编译环境，用一个命令就能编译apk或者ios，并且这个编译的过程和duxapp的模块化理念高度绑定，通过指定 --app= 指定不同的入口，就能打包出不同的项目，就像下面这样

# 编译 duxuiExample 的安卓调试版本
yarn android --app=duxuiExample

# 编译 duxuiExample 的IOS调试版本
yarn ios --app=duxuiExample

# 编译成功后启动Metro代码编译服务
yarn start --app=duxuiExample

下面我来详细介绍一下，在duxapp中是如何对RN进行优化的

配置化

对于Taro的壳子，或者原生React Native，都会存在 android ios这两个文件夹，而在duxapp中，这些文件夹的内容是自动生成的，那么对于需要在这些文件夹中修改的配置内容，例如包名、版本号、新架构开关等，都通过配置文件的方式配置了，而不需要需修改具体的文件

这个配置文件是项目配置文件夹下的 configs/duxuiExample/duxapp.js，其中 duxuiExample 就是我通过--app=duxuiExample 指定的入口模块

这个配置文件的内容就像下面这样，可以清晰的看到，对安卓配置了包名、名称、版本号等信息，IOS同样如此

const config = {
   
  android: {
   
    appid: 'com.duxapp.duxui',
    appName: 'duxUI库',
    versionCode: 2,
    versionName: '1.1.0',
    keystore: {
   
      storeFile: 'duxui.keystore',
      keyAlias: 'duxui',
      storePassword: 'TN62eyasJAKm2ksD',
      keyPassword: 'TN62eyasJAKm2ksD'
    }
  },
  ios: {
   
    BundleId: 'com.duxapp.duxui',
    appName: 'duxUI库',
    versionCode: 1,
    versionName: '1.0.0',
    team: '',
    plist: {
   
      'duxapp/Info.plist': {
   
        NSCameraUsageDescription: 'duxUI库需要拍照用于APP内图片上传更换头像',
        NSContactsUsageDescription: 'duxapp需要访问你的通讯录，将客户信息保存到通讯录中',
        NSLocalNetworkUsageDescription: 'App需要访问你的本地网络，用于和服务器建立连接',
        NSLocationAlwaysAndWhenInUseUsageDescription: '使用你的位置信息用于地图定位和位置选择',
        NSLocationAlwaysUsageDescription: '使用你的位置信息用于地图定位和位置选择',
        NSLocationWhenInUseUsageDescription: '使用你的位置信息用于地图定位和位置选择',
        NSPhotoLibraryAddUsageDescription: 'duxUI库需要保存宣传图到你的相册用于分享',
        NSPhotoLibraryUsageDescription: 'duxUI库需要访问相册用于APP内图片上传更换头像',
      }
    }
  }
}

module.exports = config

内容复制

上面这个配置文件已经解决了大部分打包需要用到的配置，但是你开发过RN的话你会看出来，证书他是一个文件，这里只指定了证书文件名称，但是并未指定证书具体内容，还有打包一个app，它总是需要一个app图标的，包括安卓和ios的图标，那么这些内容，可以通过配置文件中的copy文件夹，将这些项目文件复制到安卓或者ios对应的文件位置

这个文件夹内容看起来是这样的

image1.png

那么你又会发现，好像这些文件的结构，以及如何生成这些文件，又是一个头疼的问题，duxapp-cli，帮你解决了这个麻烦的问题，只需要两个简单的命令，就可以自动创建这个些文件

首先是安卓证书文件，需要注意的是，这里是指定--config=，而不是指定 --app=

yarn duxapp android keystore --config=duxuiExample

创建成功后，需要手动将命令行打印的配置内容，放进duxapp.js相应位置

然后是logo创建，需要将你项目的logo文件放在配置文件根目录，也就是 configs/duxuiExample/logo.png

yarn duxapp rn logo --config=duxuiExample

命令使用成功后，他会自动把logo放进对应位置，你就不需要进一步操作了

这样是不是就简单起来了，下面来看看，要如何使用第三方插件，例如微信插件、高德地图插件等

以上所有提到的 duxuiExample 都是以 UI库示例 这个模块项目来举例的，在你的项目中根据实际情况替换

三方模块

你的项目或多或少都要用一些第三方的插件，React Native基础模块中已经包含了很多基础常用插件，你可以通过三方模块查看到，包含的基础插件

传统的方法是将他们添加到 package.json 依赖中，然后根据文档内容修改安卓或者ios文件夹对应的内容，在duxapp中提供了另外一种方式来实现第三方插件的使用

像这个react-native-view-shot安装方式很简单的插件，他只要求你将他添加到 package.json 的依赖中就可以使用了

那么我们结合模块，在你需要用到这个功能的模块配置文件中，一样的添加上这个依赖即可，像下面这个duxui模块的配置文件一样

{
   
  "name": "duxui",
  "description": "DUXUI库",
  "version": "1.0.42",
  "dependencies": [
    "duxapp"
  ],
  "npm": {
   
    "dependencies": {
   
      "b-validate": "^1.5.3",
      "react-native-view-shot": "~3.8.0",
      "react-native-fast-shadow": "~0.1.1",
      "array-tree-filter": "^2.1.0"
    }
  }
}

其实开源的大多数第三方插件都是这样的，只需要添加到依赖中，重新打包就能用了，但是很少数的插件，他就是要改一些安卓或者ios里面的原生内容，像微信插件，它需要的改动还挺多的，我根据他文档需求，列举了下面这些

安卓：

  • 添加 proguard
  • 新建 WXEntryActivity.java 用于回调处理
  • 新建 WXPayEntryActivity.java 用于支付回调处理
  • 添加 <package android:name="com.tencent.mm" /> 用于跳转到微信的白名单
  • 添加 .wxapi.WXEntryActivity
  • 添加 .wxapi.WXPayEntryActivity

ios：

  • 由于插件bug，需要添加 pod 依赖项 pod 'WechatOpenSDK'
  • 修改 AppDelegate.h 入口文件
  • 修改 AppDelegate.mm 文件进行一些处理
  • 在 Info.plist 添加 Schemes 和 BundleURLTypes 和 applinks
  • 在项目配置中，添加 UniversalLink

其他：

  • 通过patch修复当前版本的一个bug

首先还是要在模块中添加依赖

{
   
  "name": "wechat",
  "description": "端微信模块依赖,APP端和h5端",
  "version": "1.0.15",
  "dependencies": [
    "duxappReactNative"
  ],
  "npm": {
   
    "dependencies": {
   
      "react-native-wechat-lib": "^3.0.4",
      "wechat-jssdk": "^5.1.0"
    }
  }
}

那么在duxapp前面提到，安卓和ios文件夹的内容都是自动生成的，我又是如何处理这些修改的呢？这里就需要用到 duxapp-cli 提供的模块更新脚本来处理

针对微信插件的处理脚本文件位于 src/wechat/update/index.js，这个文件的内容是下面这样的

// eslint-disable-next-line import/no-commonjs
module.exports = ({
    config }) => {
   
  const {
    android, option } = config
  return {
   
    // 描点插入
    insert: {
   
      'android/app/proguard-rules.pro': {
   
        'content': `
  ##### 微信 ######
  -keep class com.tencent.mm.opensdk.** { *; }
  -keep class com.tencent.wxop.** { *; }
  -keep class com.tencent.mm.sdk.** { *; }`
      },
      'ios/Podfile': {
   
        'podEnd': `  pod 'WechatOpenSDK'`
      },
      'ios/duxapp/AppDelegate.h': {
   
        import: '  #import "WXApi.h"',
        'appDelegate.protocol': '  ,WXApiDelegate'
      },
      'ios/duxapp/AppDelegate.mm': {
   
        import: '#import <React/RCTLinkingManager.h>',
        appDelegate: `// react-native-wechat-lib start

  - (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
      return  [WXApi handleOpenURL:url delegate:self];
  }

  - (BOOL)application:(UIApplication *)application
    continueUserActivity:(NSUserActivity *)userActivity
    restorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullable
    restorableObjects))restorationHandler {
    // 触发回调方法
    [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
    return [WXApi handleOpenUniversalLink:userActivity
    delegate:self];
  }

  // Universal Links 配置文件, 没使用的话可以忽略。
  // ios 9.0+
  - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
              options:(NSDictionary<NSString*, id> *)options
  {
    // Triggers a callback event.
    // 触发回调事件
    [RCTLinkingManager application:application openURL:url options:options];
    return [WXApi handleOpenURL:url delegate:self];
  }
  // react-native-wechat-lib end`
      }
    },
    create: {
   
      'android/app/src/main/java/cn/duxapp/wxapi/WXEntryActivity.java': `package ${
     android.appid}.wxapi;

import android.app.Activity;
import android.os.Bundle;
import com.wechatlib.WeChatLibModule;

public class WXEntryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WeChatLibModule.handleIntent(getIntent());
    finish();
  }
}
`,
      'android/app/src/main/java/cn/duxapp/wxapi/WXPayEntryActivity.java': `package ${
     android.appid}.wxapi;

import android.app.Activity;
import android.os.Bundle;
import com.wechatlib.WeChatLibModule;

public class WXPayEntryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WeChatLibModule.handleIntent(getIntent());
    finish();
  }
}
`
    },
    android: {
   
      xml: {
   
        'app/src/main/AndroidManifest.xml': {
   
          tag: {
   
            queries: {
   
              child: '<package android:name="com.tencent.mm" />'
            }
          },
          attr: {
   
            'android:name=".MainApplication"': {
   
              child: `<activity
                android:name=".wxapi.WXEntryActivity"
                android:label="@string/app_name"
                android:exported="true"
                android:taskAffinity="${
     android.appid}"
                android:launchMode="singleTask"
              />
              <activity
                android:name=".wxapi.WXPayEntryActivity"
                android:label="@string/app_name"
                android:exported="true"
              />`
            }
          }
        }
      }
    },
    ios: {
   
      plist: {
   
        'duxapp/Info.plist': {
   
          CFBundleURLTypes: [
            {
   
              CFBundleTypeRole: 'Editor',
              CFBundleURLName: 'weixin',
              CFBundleURLSchemes: [
                option?.wechat?.appid || 'wx'
              ]
            }
          ],
          LSApplicationQueriesSchemes: ['weixin', 'wechat', 'weixinULAPI']
        },
        'duxapp/duxapp.entitlements': {
   
          'com.apple.developer.associated-domains': [
            `applinks:${
     option?.wechat?.applinks || 'duxapp.cn'}`
          ]
        }
      }
    }
  }
}

这个文件导出了一个函数，这个函数参数中的 config 就是当前项目的RN编译配置文件，这个文件中可以获取到了包名、版本号等信息

函数返回了一个对象，这个对象中的每一个key就代表不同的功能，下面一一介绍一下这些key

  • insert 用于将内容插入到指定文件的指定位置
  • create 用于将文件创建于指定位置
  • android 其中的xml用来处理合并安卓中的xml文件的，这是用 xmldom来实现的
  • ios 其中的plist是用来合并ios的plist配置文件的

关于这个脚本文件的详细内容需阅读 使用原生模块 了解详情

看了半天，是不是感觉这个模块处理也是挺复杂的，其实我已经封装了一些常用的原生模块，就像这个微信插件，你不需要再去实现一遍，你只需要安装这个微信模块并把他添加到你项目模块的依赖中就能使用了

yarn duxapp app add wechat

然后就像 duxuiExample 这个模块的配置文件一样，将 wechat 添加到依赖中，然后重新编译

{
   
  "name": "duxuiExample",
  "description": "ui库示例",
  "version": "1.0.13",
  "dependencies": [
    "duxui",
    "duxcms",
    "amap",
    "echarts",
    "wechat"
  ]
}

还有更多的模块，请前往应用商店查看 https://www.dux.cn/page/apps

总结

通过上面的说明，你已经基本了解了duxapp是如何处理RN端开发的，还有很多的详细的内容，还需要前往文档查看http://duxapp.cn/docs/course/rn/start

再结合duxapp提供的ui库、工具库、全局样式等方法，就能很快的完成你的APP项目了

GitHub：https://github.com/duxapp

文章标签：
Android开发
iOS开发
前端开发
移动开发
XML
关键词：
开发APP
react APP
react native APP
React Native事半功倍
APP事半功倍
游客llgnne5y2oz3o
目录
相关文章
前端徐徐
|
29天前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”，介绍了React及其常用库。React是由Meta开发的JavaScript库，用于构建动态用户界面，广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景，帮助开发者提升开发效率和代码质量。
前端徐徐
106 4
React开发需要了解的10个库
邹荣乐
|
25天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
381 7
邹荣乐
|
25天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
447 1
java冯坚持
|
1月前
|
XML 前端开发 JavaScript
react学习笔记一：入门级小白到脚手架（create-react-app）开发项目
这篇文章是React的学习笔记，覆盖了从React的基础用法到高级特性，包括组件化、状态管理、生命周期、虚拟DOM等主题，适合React初学者参考。
java冯坚持
85 0
react学习笔记一：入门级小白到脚手架（create-react-app）开发项目
上海龙兵兵数字科技有限公司成都分公司
|
11天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统，都有哪些功能？
在快节奏的现代生活中，家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题，如服务质量不稳定、价格不透明等，我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式，解决了私单、复购、推广和盈利四大痛点，全面提升了服务质量和用户体验，旨在成为家政行业的领导者。
上海龙兵兵数字科技有限公司成都分公司
28 1
diygwcom
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
diygwcom
97 1
uniapp一个人开发APP关键步骤和考虑因素
邹荣乐
|
25天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
邹荣乐
52 9
邹荣乐
|
29天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
邹荣乐
161 1
山东布谷科技_sun
|
8天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解！
山东布谷科技_sun
25 0
跃@sir
|
1月前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
跃@sir
48 4

ModelScope模型即服务

热门文章

最新文章

  • 1
    阿里云通义千问向全社会开放！
  • 2
    智胜未来：国内大模型+Agent应用案例精选，以及主流Agent框架开源项目推荐
  • 3
    multi-agent：多角色Agent协同合作，高效完成复杂任务
  • 4
    Llama 3开源，魔搭社区手把手带你推理，部署，微调和评估
  • 5
    ModelScope一键部署模型：新手村实操FAQ篇
  • 6
    大模型时代，还缺一只雨燕 ｜ SWIFT：魔搭社区轻量级微调推理框架
  • 7
    通义千问72B、1.8B、Audio模型开源！魔搭社区最佳实践来啦！
  • 8
    自然语言处理Transformer模型最详细讲解（图解版）
  • 9
    “魔搭”来了！一文深度解读达摩院推出的AI模型社区
  • 10
    TripoSR开源！从单个图像快速生成 3D 对象！（附魔搭社区推理实战教程）
  • 1
    Java“NoSuchElementException”问题解决
    16
  • 2
    魔搭案例开源获奖
    38
  • 3
    如何驱逐某个节点上到某些名称空间的pod到其他节点
    19
  • 4
    低功耗蓝牙
    13
  • 5
    图片修复
    46
  • 6
    图篇修复
    30
  • 7
    在实际项目中，如何选择使用 Flux 架构或传统的 MVC 架构
    37
  • 8
    魔搭的notebook再次打开时swift导入失败
    80
  • 9
    如何使用自然语言处理库`nltk`进行文本的基本处理
    44
  • 10
    开发者的黄金时代：原生鸿蒙应用市场的全生命周期服务
    57

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • 互联网安全-移动APP漏洞风险与解决方案
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • 星轨-钉钉APP分发实训
    • 下一篇
    无影云桌面