统一ANDROID与IOS两个平台的程序入口区分平台的组件简介

2024-06-19 12:48

本文主要是介绍统一ANDROID与IOS两个平台的程序入口区分平台的组件简介,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

统一ANDROID与IOS两个平台的程序入口&&区分平台的组件简介




本站文章均为 李华明Himi 原创,转载务必在明显处注明: 

转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2260.html

      本篇介绍两个细节:

      1. 关于如何将index.Android.js 与index.iOS.js统一管理起来。

      2.  Platform 组件的简单介绍与使用 

 一:将index.android.js 与index.ios.js统一管理起来。

由于React本身就是跨平台的,但是创建的React项目总会有各自不同的程序入口文件,如下图展示目录结构:

ataa

标识1:这里是两个平台的项目文件夹,这里一般就是针对各平台不同配置、嵌入第三方插件等专属平台相关设置与添加的地方。

标识2:  React 在不同平台调用的不同入口文件。

那么正常情况下,我们只要不涉及到某个平台独有的特性代码、组件或插件等,我们就完全没有必要走两个不同的入口。否则在Android上运行可能index.ios下运行的代码段还要拷贝到index.android里,反之亦然。

因此我们可以新建一个组件class 让俩平台共同显示这个class,就可以避免这种来回拷贝浪费的时间。

1. 假设我们新建了一个叫Main.js的组件Class

2. 然后index.ios.js如下:

3.index.android.js如下:

这样统一显示Main组件的内容,以后不论在android还是ios平台都可以完美兼容,小细节,估计大家一看就懂。

 

        二. Platform 组件的简单介绍与使用 

有时候我们会区分平台做一些处理,比如充值、适配问题、接入第三方SDK或与原生平台组件进行交互等等。

这时我们就需要 RN提供的 Platform 组件~ 使用很简单,就不多赘述了。

示例:

代码段1:(导入Platform组件)

 

代码段2:

主要看 testAlert 的函数中的内容,通过Platform.OS获取当前平台类型与android/ios做比较即可得知。

运行效果如下(点击查看动态图):

user27


这篇关于统一ANDROID与IOS两个平台的程序入口区分平台的组件简介的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1075075

相关文章

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Android如何获取当前CPU频率和占用率

《Android如何获取当前CPU频率和占用率》最近在优化App的性能,需要获取当前CPU视频频率和占用率,所以本文小编就来和大家总结一下如何在Android中获取当前CPU频率和占用率吧... 最近在优化 App 的性能,需要获取当前 CPU视频频率和占用率,通过查询资料,大致思路如下:目前没有标准的

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

java两个List的交集,并集方式

《java两个List的交集,并集方式》文章主要介绍了Java中两个List的交集和并集的处理方法,推荐使用Apache的CollectionUtils工具类,因为它简单且不会改变原有集合,同时,文章... 目录Java两个List的交集,并集方法一方法二方法三总结java两个List的交集,并集方法一

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

将java程序打包成可执行文件的实现方式

《将java程序打包成可执行文件的实现方式》本文介绍了将Java程序打包成可执行文件的三种方法:手动打包(将编译后的代码及JRE运行环境一起打包),使用第三方打包工具(如Launch4j)和JDK自带... 目录1.问题提出2.如何将Java程序打包成可执行文件2.1将编译后的代码及jre运行环境一起打包2

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后