React-Native Android 与 IOS App使用一份代码实现方法

React-Native  Android 与 IOS 共用代码

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

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

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

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

代码下载:

http://xiazai.jb51.net/201612/yuanma/react-native-imapp-master(jb51.net).rar

andorid 版本

ios 版本

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2016-12-06

React Native第三方平台分享的实例(Android,IOS双平台)

本文主要介绍了React Native第三方平台分享的实例(Android,IOS双平台),分享给大家,具体如下: 源码已开源到Github,地址请点击:react-native-share[一行代码,双平台分享] 目前支持分享的平台有[QQ][QQ空间][微信][朋友圈][微博][FaceBook]  欢迎大家star,fork..... [ Android平台配置 ] 1. app目录下创建 libs 文件夹,添加依赖文件[直接复制源码中 libs 目录即可] 2. app / src /

Android原生嵌入React Native详解

1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过. 说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开. 启动npm 下面说一下android

详解React Native监听Android回退按键与程序化退出应用

详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

Android Rreact Native 常见错误总结

Android Rreact Native 常见错误总结 1.invariant violation:expected a component class,got[object object] 创建自定义组件首字母要大写,否则会报错. 2.Module 0 is not a registered callable module. 将gradle升级成最新版本(cd Android 进入android目录执行:sudo ./gradlew clean) 或者通过android studio工具升级

React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)

在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下 ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的. 今天我们来实现一个iOS和Android通用的上拉刷新功能. 下面简要介绍下我实现的思路. 思路: 1.常量定义: const moreText = "加载完毕"; //foot显示的文案 //页码 var pageNum = 1; /

Android React Native原生模块与JS模块通信的方法总结

Android React Native原生模块与JS模块通信的方法总结 前言: 在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式. 方式一:通过Callbacks的方式 说起Callbacks大家都不陌生,它是最常用的设计模式之一.无论是Java,Object-c,C#,还是JavaScript等都会看到Callbacks的身影. 原生模块支持Callbacks类型的参数,该Callbacks对应JS中的f

react-native 封装选择弹出框示例(试用ios&android)

在开发 App 的时候,经常会使用到对话框(又叫消息框.提示框.告警框). 在web开发中经常会用得到.今天就来介绍了一下react-native 封装弹出框 之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 一.封装要点 1.使用动画实现弹框布局及显示隐藏效果 2.通过一个boolean值控制组件的显示隐藏 3.弹框选项数组通过

Android React-Native通信数据模型分析

无论是计算机领域还是日常生活中,我们所言的通信,其核心都是数据信息的交换,而数据模型的优劣对通信效率有着决定性的作用. 在React-Native项目中,Javascript语言与Native两种语言(Java或OC等)间存在着大量的数据交换,也就是所谓的通信.众所周知,移动APP对性能的要求无比苛刻,如果通信数据模型设计地不合理,很可能引起多线程下的数据安全问题,以及应用性能问题,比如内存泄漏,UI绘制缓慢等. 前面几篇博客我们详细分析过React-Native的通信机制,主要有两个方向: J

Windows下React Native的Android环境部署及布局示例

搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理 配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真

Windows下Python的Django框架环境部署及应用编写入门

环境搭建 1.下载所需的软件包: (1)python安装包 (2)django安装包 以下2个包其实是安装python包管理工具,在后面安装django文档包模块时会用到,下载网站是pypi (1)setuptools.exe  (2)pip 2.安装所需的软件包: python安装包是exe,setuptools也是exe,所以直接双击安装即可,先安装 django.pip是python模块包:安装时先解压,而后进入目录后使用命令:python setup.py install 安装即可 3.

React Native 搭建开发环境的方法步骤

本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y

React Native中Android物理back键按两次返回键即退出应用

前言 本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 话不多说,直接上图: 测试代码 第16~22行 设置事件监听以及移除事件监听. componentWillMount(){ BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); } componentWillUnmount()

Windows下使用VMWare搭建Linux环境的步骤(图文)

自从还了Mac 后,原来的笔记本就闲置了下来,这台笔记本的配置还是不错的,可以装几个虚拟机用来平时的搭建小规模集群的实践. 准备工作 安装VMWare 版本 :VMware Workstation 15 Pro 15.5.6 build-16341506 安装步骤没有过多可说的,. 下载 Linux发行版 由于我的云服务器一用的CentOS ,也习惯了,所以这次也是使用了 CentOS 版本 : CentOS 7 可以在 清华镜像站下载 ,一般情况 下载 4.5G 左右的这个 创建虚拟机 打开

windows下配置php5.5开发环境及开发扩展

网上的教程是比较多的,但是我发现在windows下的扩展开发比较少,而且大多都是php5.3版本以前的,今天我就给大家讲解一下php扩展开发,我就拿php5.5的版本来说明一下的了 windows环境(我个人的) 复制代码 代码如下: windows 8.1 企业版(mac os Boot Camp安装的) Visual Studio 2012 版本 msysgit  (http://msysgit.github.io/ 下载) php-sdk-binary-tools-20110915.zip

React Native与Android 原生通信的方法

我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实

Windows下Ruby on Rails开发环境安装配置图文教程

本文详细介绍如何在Windows配置Ruby on Rails 开发环境,希望对ROR初学者能有帮助. 一.下载并安装Ruby Windows下安装Ruby最好选择 RubyInstaller(一键安装包). 下载地址: http://rubyforge.org/frs/?group_id=167 . 我们这里下载目前较新的rubyinstaller-1.9.3-p0.exe 一键安装包.这个安装包除了包含ruby本身,还有许多有用的扩展(比如gems)和 帮助文档. 双击安装,安装过程出现如下

windows下apache搭建php开发环境

本文详细介绍了在Windows2003下使用Apache2.2.21/PHP5.3.5/Mysql5.5.19/phpMyAdmin3.4.9搭建php开发环境. 第一步:下载安装的文件 1. Apache 版本 httpd-2.2.21-win32-x86-no_ssl.msi 2. MySQL 版本 mysql-5.5.19-win32.msi 3. PHP 版本 php-5.3.5-Win32-VC6-x86.zip 4. phpMyadmin 版本 phpMyAdmin-3.4.9-al

React Native使用百度Echarts显示图表的示例代码

Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.相信很多同学在网页端都使用过.今天我就来介绍下在React Native中如何使用Echarts来显示各种图表. 首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的. 安装 npm install native-echarts --save 安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts. 目录结构如下图所示: 基础