我的第一个RN项目注意事项说明

#TonkinTalent


##下载本项目前,请安装nodejs,安装react-native基础环境,安装facebook最新的yarn管理工具。

1. 采用 git下载本工程,命令行下载如下:
  git clone https://git.oschina.net/zowork/TonkinTalent
2. 更新子仓库
  git submodule update --init --recursive
3. cd TonkinTalent
4. yarn install/npm i 
5. 运行react-native link
6. 安装完毕后,

##运行

### ios运行
react-native run-ios
react-native run-ios --simulator "iPhone 5se"

COMMOND + R 重新加载
COMMOND + D 调试菜单

### android 运行
react-native run-android
adb devices 查看连接设备

### 日志

执行:
```bash
react-native log-ios
react-native log-android
```

##开发

### 目录结构

* /img 目录下是图片请注意按照功能和页面放置图片,图片名称类似 name@2x.png
* /src 下面是代码目录,
* /src/pages 页面
* /src/widget 为公用组件
* /commons 目录为公用组件,参考公用组件详细说明
* /app-js-sdk 为客户端sdk 目录,使用 git子模块 ,参考git子模块说明

### commons

commons 模块集成有apis和setTimeout 函数,会在组件释放时释放相关资源

#### 代码提示
如果commons 不提示,请修改idea 或者webstorm 
*. 修改JavaScript 级别为flow 或者 jxf
*. 把commons和app-js-sdk 加入lib(一般不需要)

#### 网络请求

网络请求是标准的Promise ,唯一注意的地方是加入了default 函数处理错误情况!必须调用
支持Promise 相关并行,串行等操作

1. 修改服务器协议地址

修改 src/app.js 文件 下的
Apis.init("http://127.0.0.1:8080/","v1");

2. 简单调用

````javascript
this.commons.apis.accountApi.login(LoginForm.form(
    "123456", "13910831723"
)).then((m: LoginRet) => {
    
}).default();
````


3.串联

```javascript
this.commons.apis.accountApi.login(LoginForm.form(
    "123456", "13910831723"
)).then((m: LoginRet) => {
    return this.commons.apis.testApi.test()
}).then((o: TestObject) => {
    return this.commons.apis.testApi.test()
}).default();
```

4.并行

```javascript
Promise.all(
    [
        this.commons.apis.accountApi.login(LoginForm.form(
            "123456", "13910831723"
        )),
        this.commons.apis.testApi.test()
    ]
).then((m:LoginRet,o:TestObject)=>{

}).default();
```


#### commons 使用例子如下

````javascript
import React, {Component, PropTypes} from "react";
import {Text, View} from "react-native";
import Apis, {LoginForm, LoginRet} from "app-js-sdk";
import {Commons} from "commons";

export default class IndexView extends Component {
    commons: Commons = new Commons().bind(this);

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //登录服务器
        this.commons.apis.accountApi.login(LoginForm.form(
            "123456", "13910831723"
        )).then((m: LoginRet) => {

        }).default();

        //定时任务
        this.commons.setTimeout(()=>{

        },500)
    }

    render() {
        return <View></View>;
    }
}

console.log("IndexView", IndexView);
````




## git子模块 

**使用 根目录下的 updateApi.sh 更新api 仓库**

app-js-sdk: https://git.oschina.net/hengxinAPP/app-js-sdk.git

git submodule add https://git.oschina.net/hengxinAPP/app-js-sdk.git app-js-sdk
git submodule 查看子仓库

初始化子仓库 git submodule init

更新子仓库 git submodule update --init --recursive

如果修改子仓库地址后用git submodule sync 同步




##杂项
清楚缓存
rm -rf $TMPDIR/react-*

//    "apis": "git+https://git.oschina.net/hengxinAPP/app-js-sdk.git",


## 使用 Ant Design Mobile of React 组件库

文档:<https://mobile.ant.design/docs/react/introduce>

github地址:<https://github.com/ant-design/ant-design-mobile>

安装 react-native-navigation
npm install react-native-navigation@next --save


## icon和加载画面

首先安装

npm install -g yo file:./lib/generator-rn-toolbox2
npm uninstall -g yo file:./lib/generator-rn-toolbox2

yo rn-toolbox2:assets --icon icon.png
yo rn-toolbox2:assets --splash splash.png --ios
yo rn-toolbox2:assets --icon icon.png --splash splash.png --store

node lib/generator-rn-toolbox/generators/assets/index.js
查看<https://github.com/bamlab/generator-rn-toolbox/blob/master/generators/assets/README.md>

激光

npm run configureJPush 5f8e78cbbc7a5601727b62c9 app


上线准备

1 app名字,描述,关键词,技术营销网址
2 销售范围区域
3 公司名字
4 3页最多5页进行截图(iphone5 iphone6 iphone6s)3套
5 商务代表联系方式
6 分级选项
7 演示账号
8 能ipv6 访问的 https 后端服务器

http://www.jianshu.com/p/b1b77d804254
### React Native 项目适配鸿蒙系统的开发指南与解决方案 为了使 React Native (RN) 项目能够运行于华为的鸿蒙操作系统上,开发者需要考虑多个层面的技术调整和兼容性处理。以下是详细的指导原则以及可能遇到的关键技术挑战。 #### 鸿蒙系统支持 RN 的现状 目前,鸿蒙官方并未直接提供针对 React Native 的原生支持工具链[^1]。然而,通过社区的努力和技术扩展,可以实现部分功能移植。这通常涉及以下几个方面: - **JS 引擎替换**:鸿蒙内置了 ArkTS 和 JavaScript 运行环境,因此可以通过修改 JS 引擎来适应鸿蒙平台的需求。 - **Native 模块桥接**:由于 React Native 使用 Bridge 来连接 JavaScript 层与本地层,需重新设计该机制以匹配鸿蒙 API 结构。 #### 技术路径分析 ##### 1. 修改构建流程 React Native 应用依赖 Android 或 iOS 平台特定的编译配置文件(如 `android/` 和 `ios/` 文件夹)。对于鸿蒙系统而言,这些默认目录结构不再适用。开发者应创建一个新的目标架构定义,并将其集成至现有的 CI/CD 流程中[^2]。 ```bash # 创建新的鸿蒙专用目录并初始化基础设置 mkdir hm && cd hm npm install @hmscore/react-native-harmony --save ``` ##### 2. 替代核心组件库 某些标准 UI 组件无法直接映射到 HarmonyOS 上。例如 ScrollView、Text Input 等都需要定制化版本才能正常工作。推荐采用第三方开源框架或者自行封装一层抽象接口来解决这一问题[^3]。 ##### 3. 调整网络请求逻辑 如果应用内部集成了 fetch() 方法或其他 HTTP 客户端,则需要注意它们的行为可能会因底层 OS 不同而有所差异。建议统一使用 Axios 类型的跨平台方案作为替代品[^4]。 ```javascript import axios from 'axios'; const apiClient = axios.create({ baseURL: 'https://example.com/api', }); export default apiClient; ``` ##### 4. 处理权限管理策略 不同于传统移动设备上的静态声明方式,在 HarmonyOS 中动态申请敏感资源访问权成为必要条件之一。务必更新相关代码片段以满足最新安全规范的要求[^5]。 --- #### 注意事项 尽管上述方法可以帮助完成初步迁移任务,但仍存在诸多局限性和潜在风险因素值得重视: - 性能损耗:由于额外增加了多级转换环节,可能导致最终用户体验下降; - 生态碎片化:随着更多厂商加入 HMS Core 支持行列,未来可能出现多种变体形式难以维护一致行为表现; ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值