React-Native 开发 android & ios App，共享一份代码

最新推荐文章于 2024-07-25 17:17:33 发布
最新推荐文章于 2024-07-25 17:17:33 发布
阅读量120 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 移动开发 python
原文链接：https://my.oschina.net/362228416/blog/802687
本文分享了一年前使用React Native开发跨平台应用的经验，重点介绍了如何实现iOS与Android平台的组件共享，包括自定义组件的设计与实现。文章还提供了一个web版到原生应用的转换案例，供读者参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一年前写的。

React-Native 开发的App, 所有组件ios & android 共用, 共享一份代码

包括一些自定义的组件, 如NavigationBar, TabBar, SegmentedControl, 使用字体图标, 具有一定的参考意义

主要专注于布局, 共享组件/代码, 以及一些React自带的组件, 如: ScrollView, TouchableOpacity, View, Text, ListView, Image, WebView 和 Api的使用,

这并不是一个完整版, 只是业余时间, 对web版的一个native化, 特共享出来, 供各位参考.

代码在github上面

https://github.com/362228416/react-native-imapp

andorid 版本

输入图片说明

ios 版本

输入图片说明

转载于:https://my.oschina.net/362228416/blog/802687

React-Native Android 与 IOS App使用一份代码实现方法
01-05
React-Native  Android 与 IOS 共用代码 React-Native 开发的App, 所有组件iOS & Android 共用, 共享一份代码 包括一些自定义的组件, 如NavigationBar, TabBar, SegmentedControl, 使用字体图标, 具有一定的参考意义 主要专注于布局, 共享组件/代码, 以及一些React自带的组件, 如: ScrollView, TouchableOpacity, View, Text, ListView, Image, WebView 和 Api的使用, 这并不是一个完整版, 只是业余时间, 对web版的一个nati
React Native 中为IOS和Android设置不同的Style样式,一套代码解决双端显示
Firen的个人博客ReactNative
09-07 1773
React Native 开发中，大多数的组件都是IOS和Android通用的，包括大量的功能性代码，至少有80%以上的代码可以复用，而剩下的一些组件样式/少量的代码会需要区分双端，但是为了这少量的代码把IOS和Android完全区分这明显不合适，代码复用性下降，代码维护量上升，明显是不合理的。 本文借鉴网上的教程，为大家介绍如何为IOS端和Android端设置不同的style样式，让一套代码双...
React Native 混合ios android开发 及常用框架
04-19 1453
在集成过程中，需要修改package.json 和 Podfile，按文档中的内容，如果pod install过不了的话，先修改package.json，然后执行命名。再修改Podfile,执行命令。
react-native-clear-app-cache:清理app缓存 React-Native模块封装 支持iOSAndroid
05-10
README Author  E-mail ...支持 iOS Android 清理app缓存 安装使用 npm install --save react-native-clear-app-cache Then link with: react-native link react-native-clear-app-cache 运行示例
create-react-native-app：创建可在iOS，Android和Web上运行的React Native应用
01-29
yarn android （ react-native run-android ）生成Android应用程序。 yarn web （ expo start:web ）在浏览器中运行网站。 范本 默认情况下，您创建一个支持iOS，Android和Web项目。 通过选择“来自...的模板”...
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 重命名项目后，您应该...
Facebook 开源安卓版 React Native，开发者可将相同代码用于网页和 iOS 应用开发
weixin_34405557的博客
09-23 103
　 转自:http://mt.sohu.com/20150915/n421177212.shtml     　　 　　 　　Facebook 创建了React Java 库，这样，Facebook 的工程团队就可以用相同的代码给iOS、安卓和网页开发界面了。现在，Facebook 通过开源 React“三部曲”中的最后一部分—— 安卓版 React Native （React Nati...
react-native开发安卓app相关使用总结
weixin_33831196的博客
10-07 914
记录自己平时使用react-native时遇到的问题。其实大部分问题的解决办法都是看github issues解决的 参考：我之前参考过这篇文章，记录的问题还挺全面，也可以参考这个 react-native版本迁移教程 1. 2018.10.7 升级到0.57.2报错 今天升级了一下reaact-native 版本从0.57.0 -&...
跨android和iOS平台的js和原生代码相互调用示例
10-24
跨android和ios平台的js和原生代码相互调用的工程代码和html示例文件。
ios和android搭配,如何开发一个适配Android和iOS双平台的React Native应用
weixin_39872044的博客
05-28 483
众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用，那么如何让我们开发的React Native应用适配Android和iOS双平台呢？在这篇文章中我将从布局、组件选择、图片、性能问题、Bugs等几个方面来谈一谈Android和iOS的适配问题。布局React Native在布局方面采用的...
React Native+Android/iOS混合开发
Bearin的博客
04-21 833
一.初始化项目--有两种方式： 1.安装一个不含Android和iOS模块的React Native项目 （1）进入workspace文件夹 （2）创建项目文件 mkdir RNBearin或者直接创建RNBearin文件夹 （3）进入RNBearin文件夹 （4）创建package.json文件 （5）在package.json里面添加项目的内容： { "name": "RN...
ReactNative进阶（三十六）：iOS 横屏适配
IT全栈 华强工作室
01-23 2072
应用RN技术栈实现APP上线后，业务部门领导会上反馈未实现ipad横屏全屏展示，用户体验较差。由此，一场pad横屏全屏展示的APP调优工作由此开展。
react-native从入门到实战系列教程一环境安装篇(ios端和android端)
最新发布
峰会路转的博客
07-25 914
可能会经过漫长的等待，会在命令行下载很多东西，切记要忍，还有会奇奇怪怪的错，要会排错！系统全局环境配置，因为后面在cmd中会用到android的命令，所以要配置下。然后弹出这个界面，说明你的app已经真正的运行成功了！下面就可以愉快的玩耍了。
react-native 打包app发布android / ios详细教程
热门推荐
ych1274816963的博客
10-26 1万+
发布Android教程 第一步：从项目根目录进入到android 目录 第二步：使用命令 gradlew clean (mac电脑 ./gradlew clean)清空缓存。 注意： mac电脑如果此时无法使用./gradlew命令，在当前命令行输入chmod +x gradlew后，重新 输入 ./gradlew clean 即可。 第三步：使用打包命令 gradlew assembleRelease (mac电脑 ./gradlew assembleRelease)。...
【react-native】关于ios与android的环境搭建
xm_law的博客
10-21 1803
react-native+ ios +android 环境配置，针对0S 11.X 升级 12.X项目无法运行问题等解决方法与建议。
掌握React-Native开发：iReading App架构与技术解析
- **React Navigation**: 一个为React和React Native提供的导航解决方案，它允许开发者在应用中实现多种导航模式，并且易于扩展，可以实现跨平台共享代码。 - **Redux-saga**: 一个中间件，主要用于管理应用中的副...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值