跨端

王小进
10 阅读6分钟

入口

项目 - 需求 - 点击进去

新建子项需求

子项 - 新建需求 - 技术类需求

新建子项任务

点击需求进去 - 新建任务

工时登记

入口

登记

Win报错


需要装c++：📎VC_redist.x64.exe.zip

安装

安装homebrew

参考：zhuanlan.zhihu.com/p/144608732

# 国内源
curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh | sh

# 卸载
curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall | sh

安装git watchman

brew install git
brew install watchman

node安装nrm nvm pnpm

sudo npm i nrm -g
sudo npm i nvm -g
sudo npm i pnpm -g

nrm nvm命令

# 查看源
nrm ls
# 切换源
nrm use taobao

# 查看node版本
nvm ls
# 切换node版本
nvm use 20

git

# macOS添加id_rsa key, 生成key, 不要设置密码
ssh-keygen -t rsa -b 2048 -C "example@kaadas.com"
# 复制key
pbcopy < ~/.ssh/id_rsa.pub

# clone workspace仓库
git clone http://10.1.0.200/low-code/workspace.git
# 需登录gitlab账号, 如example@kaadas.com

# checkout develop/ui-public分支
git checkout -b develop/ui-public

# 新建分支
git branch -b feature/button

切换私有源操作

地址: packages.aliyun.com/npm/kds/gui…

npm login成功后

pnpm i

安装完成

构建

pnpm build

构建成功

运行到鸿蒙模拟器

运行到模拟器步骤

  • DevEco Studio / Android Studio / Xcode启动模拟器
  • workspace目录 运行pnpm i pnpm buil
  • 项目目录运行 pnpm start 等待app build完成, reload

打开DevEco Studio, 选择打开harmony文件夹 workspace/demos/app-react-native/harmony

打开build-profile.json5, 删除标注内容, 重新同步

打开file -> project Structure -> signing Configs

启动模拟器, 如果没有, 先安装模拟器

添加hdc环境变量

open ~/.zshrc
# 如果没有, 新建一个
touch ~/.zshrc

# 最后一行添加, 保存
export PATH=$PATH:/Users/lijianjian/Library/OpenHarmony/Sdk/15/toolchains
export RNOH_C_API_ARCH=1

# 执行
source ~/.zshrc

运行项目

# 进入目录
cd workspace/demos/app-react-native

# 运行
hdc rport tcp:8081 tcp:8081 && pnpm start

运行到鸿蒙手机

USB连接鸿蒙手机, 打开开发者模式, 允许本机调试

手机连接成功

运行 hdc rport tcp:8081 tcp:8081 && pnpm start

报错

解决办法: 将app改为Kaadas, 重新pnpm start

运行结果

运行到安卓模拟器

下载安装Android Studio developer.android.google.cn/studio?hl=z…

安装JDK www.react-native.cn/docs/enviro…

设置环境变量JAVA_HOME ANDROID_HOME

# 终端打开
open ~/.zshrc

# 复制粘贴一下内容, 保存
export JAVA_HOME=$(/usr/libexec/java_home)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# 执行生效
source ~/.zshrc

# 验证
echo $ANDROID_HOME
echo $JAVA_HOME

# 运行demo
cd /Users/lijianjian/codes/workspace/demos/app-react-native
pnpm start
# 输入a, 运行android

N DK报错, 根据报错内容, 安装对应版本

Android Studio - Settings - Android SDK, 如下

连接ORB|14热点, 再次运行pnpm start, 等待依赖下载安装完成

运行到安卓手机

运行

adb报error, 按照以下连接手机

手机打开开发者模式 - "USB调试"开关打开 - 连接手机 - 手机显示"允许次计算机调试"选择同意

再次运行pnpm start

运行到ios模拟器

下载Xcode 16.2

下载地址: developer.apple.com/download/al…

用Xcode打开项目ios目录, 如workspace/demos/app-react-native/ios

配置用户自定义路径

安装模拟器

打开 Xcode - Settings - Components, 选择ios安装

修改修改.xcode.env.local

# 进入 ../项目/ios目录
cd /Users/lijianjian/codes/workspace/demos/app-react-native/ios

# 复制node路径, 默认安装路径为/usr/local/bin/node
where node

# 修改.xcode.env.local, 如下图
export NODE_BINARY=/usr/local/bin/node

运行pod install

pod安装依赖, 如果没安装pod, 先运行

pod install完成如下

启动模拟器

运行pnpm start, 选择i, 运行到模拟器

以下报错, 模拟器选择reload即可

app没注册报错

修改app名称

组件实现

生成type

cd /Users/lijianjian/codes/workspace/packages/ui-library/ui-react/config/package.cjs

# 修改package.cjs, 添加Abc组件
const config = {
  ...
+ Abc: {}  
}

cd /Users/lijianjian/codes/workspace/packages/ui-library/ui-react
pnpm build

自动生成如下

组件实现

进入ui-react-native/packages目录, 新建以下文件

# abc/index.ts
export type * from '@kaadas/ui-react/packages/abc'
export { Abc as default } from './src'

# abc/src/index.ts
export * from './abc'

# abc/src/abc.tsx
import { View } from '@kaadas/runtime-sdk/components'
import { StyleSheet, dp } from '@kaadas/runtime-sdk/apis'

export function Abc() {
    return <View style={styles.container}></View>
}

const styles = StyleSheet.create({
    container: {
        width: dp(100),
        height: dp(100),
        backgroundColor: 'red',
    }
})

Abc.displayName = 'Abc'

修改登录页

运行结果

Demos

在pages目录下新建demos文件夹

# demos/index.tsx
import { Pressable, Text, StyleSheet } from 'react-native'
import { navigateTo, dp } from '@kaadas/api'

interface route {
    label: string
    url: string
}

// 页面路由
const pages: route[] = [{ label: 'Image', url: '/pages/demos/image' }]
function DemoCard(props: route) {
    return (
        <Pressable
            style={styles.container}
            onPress={() => navigateTo({ url: props.url })}>
            <Text>{props.label}</Text>
        </Pressable>
    )
}
export default function Demos() {
    return (
        <>
            {pages.map(page => (
                <DemoCard {...page} />
            ))}
        </>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        height: 48,
        marginBottom: 2
    }
})

修改apps/unified-app/un-logged-in.tsx

# un-logged-in.tsx

import type { PageConfig } from '@kaadas/api'
import Login from '../../../pages/login'
import Register from '../../../pages/register'
import { shared } from './shared'
import Demos from '../../../pages/demos'
import Image from '../../../pages/demos/image'

// 页面路由
const demoPages: PageConfig[] = [
    {
        name: 'Image',
        path: '/pages/demos/image',
        component: Image,
        options: {
            title: 'Image'
        }
    }
]

export const unLoggedIn: PageConfig[] = [
    // 默认加载第一个路由页面
    {
        name: 'Demos',
        path: '/pages/demos/index',
        component: Demos,
        options: {
            title: 'Demos'
        }
    },
    ...demoPages,
    {
        name: 'login',
        path: '/pages/login/index',
        component: Login,
        options: {
            title: '登录',
            headerShown: false
        }
    },
    {
        name: 'register',
        path: '/pages/register/index',
        component: Register,
        options: {
            title: '注册'
        }
    },
    ...shared
]

运行到IOS（真机）

  1. Xcode在运行后paused，并且报 "The app's Info.plist must contain an XXXXX key ...."问题

This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSBluetoothAlwaysUsageDescription key with a string value explaining to the user how the app uses this data.

Phillips React Native

仓库地址: http://10.1.0.200/low-code/projects/philips-react-native

checkout仓库, 放在workspace/projects目录下

workspace切换切换develop/ddl507分支, phillps-react-native切换feature/ddl507分支

运行到安卓模拟器

./gradlew权限问题

一直停在Install the app...

cd android运行chmod +x ./gradlew

cd .. 运行pnpm start选择a等待安装完成即可

运行到ios(真机)

  1. 首先需要安装xcode16.2版本
  2. 进入到pillps-react-native/ios目录下，运行pod install，安装ios的依赖

如果pod install卡在了git仓库下载上，则需要开通对应git仓库权限（涉及到的git仓库很多，很多私人的仓库，有@电子三部-李童@平台研发部-胡佳丽@电子三部-扶进前。大多数git仓库权限问题直接找@电子三部-李童协调处理），如下图：

其中还有一个front-base前端git仓库，找@电子三部-胡树聪开通权限

  1. pod install安装成功后，通过xcode打开ios目录，

登陆自己的apple开发者账号，会看到签名信息已经自动填写完成（用公司邮箱申请的开发者账号，并且加入了公司的企业开发者团队，如果没加入则找@电子三部-胡树聪）

  1. 构建到真机即可

xcodebuild命令不存在问题

原因: App Store和手动安装的目录不一样, xcodebuild命令默认指向App Store安装目录

解决办法: 应用程序, 找到Xcode图标,右键打开终端

查看Xcode.app安装位置

pwd
// 输出
/Applications/Xcode.app

重定向Xcode位置

sudo xcode-select --switch /Applications/Xcode.app

查看Xcode版本

xcodebuild -version
// 输出
Xcode 16.2
Build version 16C5032a

其他

8081端口占用

Android Studio报" A problem occurred starting process 'command 'node''"问题

Gradle JDK路径和环境变量保持同步

Android Studio打包release包

  1. 替换项目的/android/settings.gradle文件
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle").toPath().toRealPath().toAbsolutePath().toString(); applyNativeModulesSettingsGradle(settings)
rootProject.name = "HomeAccess"
include ':app'
include ':RevEasyKey'
include ':resources'
include ':common'
include ':module_api'
include ':cs_home_access'
include ':devToolkit'
includeBuild(file("../node_modules/@react-native/gradle-plugin").toPath().toRealPath().toAbsolutePath().toString())

2. build => Generate Signed App Bundle or APK =>

// key store path
/Users/qianqianfang/workspace/projects/philips-react-native/android/philips.jks

  1. adb install release 包

Xcode打包release包

一、配置 Release 模式

  1. 选择 Release 构建配置
    • 在 Xcode 顶部工具栏的 Scheme 选择框中，选择你的项目 Target。
    • 点击当前 Scheme 名称 → 选择 Edit Scheme。
    • 在左侧选择 Run 或 Archive，确认 Build Configuration 已设置为 Release。
  1. 检查代码签名（Code Signing）
    • 进入项目设置（点击项目名称 → Signing & Capabilities）。
    • 确保勾选 Automatically manage signing（或手动配置正确的证书和 Provisioning Profile）。
    • 确认 Debug 和 Release 的配置一致，尤其是 Release 模式下使用的证书（如 iOS Distribution）。

二、打包流程（生成 IPA）

通过 Archive 导出 IPA

  1. 清理项目（可选）
    • 菜单栏选择 Product → Clean Build Folder（快捷键 Shift + Cmd + K）。
  1. 开始 Archive
    • 选择设备为 Generic iOS Device 或 Any iOS Device（不能选模拟器）。
    • 点击菜单栏 Product → Archive。
    • 等待编译完成后，Xcode 会自动打开 Organizer 窗口。
  1. 导出 IPA 文件
    • 在 Organizer 中选择刚生成的 Archive，点击右侧 Distribute App。
    • 选择分发方式：
      • App Store Connect：直接上传到 App Store。
      • Development/Ad Hoc：生成测试用的 IPA（需对应 Provisioning Profile）。
    • 选择签名方式（通常选自动签名）。
    • 点击 Next 完成导出，保存 IPA 文件到本地。

三、截图

pod install完成

设置版本

入口

选择构建包

选择设备

构建ipa

分发APP

选择签名

签名完成选择导出路径导出生成的ipa文件即可

avatar
文章
阅读
粉丝