react native 混合开发代码示例

ReactNativeModuleProject

react native project for hybrrd app,自己做的一个混合开发研究,个人觉得相对于其他混合开发框架来说,有很大优势,不用学习复杂的js语法,
并且对更接近原生,能够保证运行更加流畅和风格统一,同时它的语法和控件也更加容易理解,上手较快。也可以和原生应用混合开发,互相调用,已经
互相通信,方便集成。

注意点:

  • 首先是安装环境,不是本文重点,这里不做过多介绍,自己百度,可以参考:http://reactnative.cn/
  • 下载并安装webStorm,网址:https://www.jetbrains.com/webstorm/
    jetbrains出品,拥有和androidStudio一样的体验,同时能够进行版本,管理,主题设置,插件安装等,非常强大,个人感觉甩开Visual Studio Code
    几条街,比subline等更不用说。webStorm为30天试用,聪明的程序员是知道怎么破解的。
  • 创建工程:进入到你想创建工程的目录,运行命令行:【react-native init 你的工程名称】
  • 运行工程:进入命令行,运行【cd 你的工程根目录】【react-native run-android】
  • 由于目前还未发布正式版(截止本文编辑,最新版本为0.45),所以随着版本升级,会有一些控件的使用方法发生改变,这个时候,就需要查看官方文档,
    及时更新

项目地址(欢迎fork):https://github.com/BrillantZhao/ReactNativeModuleProject

部份例图:



时间: 2024-09-16 14:42:48

react native 混合开发代码示例的相关文章

《React Native移动开发实战》出版啦

对不起,我来晚了 首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助.感谢,再次感谢!!! 工作6年多以来,一直想写一本自己的书,一方面是对自己工作经历的一个总结,也是对希望写一本书给曾经的自己一个交代,毕竟30岁的人了,搞不了几年的技术了. 我一直有写博客的习惯,喜欢将自己工作和生活的点滴写成博客,分享给大家.说说我写书的缘由吧,最近几年,特别是15年和16年,我朋友圈的好友陆续出了自己

《React Native移动开发实战》一一1.1 看透React Native

1.1 看透React Native React Native(http://facebook.github.io/react-native/)第一次进入公众的视野是在2015年1月的React.js Conf(http://conf.reactjs. org/)上,随后,同年5月份,Facebook在F8 Conference(https://www. fbf8.com/)上正式宣布:React Native项目(如图1.1所示) 在Github开源.结果一天之内,就收获了5000多颗星,受关

《React Native移动开发实战》一一1.3 搭建React Native开发环境

1.3 搭建React Native开发环境 "磨刀不误砍柴工",在正式开发React Native应用之前,需要先搭建好React Native的开发环境.搭建React Native开发环境有以下几个主要步骤. 原生开发工具:iOS开发使用Xcode,Android开发使用Android Studio and SDK Tools. Node.js(https://nodejs.org/):React Native是借助Node.js,即JavaScript运行时来创建JavaScr

《React Native移动开发实战》一一3.1 创建新的电商App

3.1 创建新的电商App之前创建了一个简单的电商项目,本节来实现对该项目的重构.3.1.1 移植旧电商项目(1)先创建React Native项目并安装依赖包. react-native init ch04 // 新建React Native项目ch04cd ch04npm install // 或者使用cnpm安装:cnpm install?小知识:npm install命令还可以简写成npm i,更多说明可以使用npm help install查看帮助文档.(2)将第2章ch03项目中的i

React Native移动开发资料库

本文整理了React Native开发中额优秀博客,以及优秀的Github库列表(很多英文资料源自于awesome-react-native) 关于开源库类 Star 100+ ️ Star 200+ ️️ Star 500+ ️️️ Star 1000+ ️️️️ Star 2000+ ️️️️️ 关于博客和视频类 值得读读 ️ 建议阅读 ️️ 强烈推荐 ️️️ 目录 网址 完整开源项目 Libraries (Star 100+) 中文博客 英文博客 视频资料 网址 源代码 官方文档 reac

《React Native移动开发实战》一一1.2 React Native的特点

1.2 React Native的特点 那么,作为跨平台应用开发的"新贵",React Native相比其他跨平台技术到底有哪些优势呢?1.2.1 其一:Learn Once, Write Anywhere 这句话是React Native官网(http://facebook.github.io/react-native/)对React Native的概述,简单明了地概括了React Native的最大特点和优点. 只需要学习React Native这一种开发方式(包括平台.语言和开发

React Native ios开发第一课

前言 本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用.如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看看这篇博客. 阅读本文之前,我们假设你已经有过使用React创建网站的经验.如果你还是一个React新手,那么我们建议你从React的网站开始学习. 设置 使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm以及watchman,你也可以有选择的使

《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码

1.5 小试牛刀--更改React Native项目源码 应用虽然已经运行起来了,但是到现在还没有看到或修改任何代码,读者是不是觉得意犹未尽呢?下面就来看看React Native项目的源码吧. 打开index.ios.js文件,可以看到与显示在设备上内容直接相关的代码: 01 export default class ch02 extends Component { // 每个页面可以理解成一个组件 02 render() { // 渲染页面的函数 03 return ( 04 // 页面根V

《React Native移动开发实战》一一3.5 拖曳刷新列表——RefreshControl组件

3.5 拖曳刷新列表--RefreshControl组件 在3.4节中,我们完善了商品列表的功能:不仅优化了列表的布局,还添加了分割线等效果.不过,该App还缺少一个常用的功能,那就是拖曳刷新.虽然也可以添加一个"刷新"按钮用于响应用户请求,但是用户体验却没有拖曳好,而且,由于现在移动开发设备屏幕通常较小,额外添加按钮对界面设计影响也较大. ?小知识:用户体验(User Experience,简称UX或UE)是涉及一个人使用一个特定产品或系统或服务的有关行为.态度与情绪.用户体验包括实