(一) 设置 Deployment Info

因为默认rn创建为iphone，在ipod打开有大黑边

所以需要 如下配置
在这里插入图片描述

(二) 设置 比例函数
如果默认使用rn的配置，会发现在ipad上面显示的很小，这时候需要缩放函数

参考链接

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

// Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) => size + ((scale(size) - size) * factor); // <-- use this

export {
  scale,
  verticalScale,
  moderateScale,
  width,
  height,
};
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

React Native + OpenHarmony：自定义useFetch Hook

自定义useFetch Hook是React生态中提升开发效率的重要实践，它封装了网络请求的复杂逻辑，为组件提供简洁的数据获取接口。在OpenHarmony平台，这种抽象尤为重要，因为需要处理平台特定的网络环境差异。本文详细探讨了在React Native与OpenHarmony 6.0.0环境下实现自定义useFetch Hook的完整方案。我们从基础设计原理出发，深入分析了OpenHarmon

avatar 开源鸿蒙跨平台开发者社区

OpenHarmony环境下React Native：useRef获取组件实例

useRef是React Hooks体系中的核心API之一，它创建了一个可变的引用对象，其.current属性被初始化为传入的参数。在React Native开发中，useRef访问DOM节点：通过ref属性关联到原生组件存储可变值：在组件生命周期内持久化数据在OpenHarmony环境下，useRef的工作机制与传统移动平台有显著差异。由于OpenHarmony采用ArkUI渲染引擎，React

avatar 开源鸿蒙跨平台开发者社区

React Native + OpenHarmony：RTL阿拉伯语适配

在移动应用开发中，RTL（Right-to-Left，从右到左）语言适配是一项关键的国际化需求。阿拉伯语、希伯来语等语言的书写和阅读习惯与英语等LTR（Left-to-Right，从左到右）语言完全相反，这就要求用户界面也需要相应地进行镜像翻转。对于React Native开发者来说，实现高质量的RTL支持不仅是技术挑战，更是提升全球用户体验的关键。文本从右向左书写数字和部分专有名词仍从左向右书写

avatar 开源鸿蒙跨平台开发者社区