原文链接:https://www.jianshu.com/p/091a68ea1ca7 写在前面 在做react-native开发的时候,我们经常会找到一些第三方组件,并且通过npm install的方式很方便的安装使用.在使用的同时,你是否想过,我们自己应该如何开发并发布一个组件呢?不管是给自己的多个项目共用,或者开源给到别人用,这都是一件很酷的事情. 那么今天,我就以我自己开发的一个在ios和android通用的CardView组件为例来讲一下,如何开发一个自己的组件,并开源到github.

react native 的成功离不开优秀的第三方组件,以下是我见过的一些优秀或者有用的RN第三方组件 按钮 APSL/react-native-button 导航 react-native-simple-routerreact-native-scrollable-tab-viewreact-native-router-fluxreact-native-router-reduxreact-native-tabbar-navigator(IOS only)react-native-navigati

github地址:https://github.com/leecade/react-native-swiper 使用方法:安装:npm i react-native-swiper –save 查看模块:npm view react-native-swiper 删除模块:npm rm react-native-swiper –save (这个添加save会在删除的同时去除package.json中的依赖) 查看帮助命令:npm help 命令 (例如npm help -i查看i的使用) 基本用法

封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Button.Text.Image等: 常用的组件已经可以帮助我们实现并满足日常开发中所遇到的功能需求: 但是产品经理突发奇想还是会提出各种"新奇"的功能: 一些复杂的界面实现,在RN层面变得异常棘手,所以需要我们从原生层去组建View,在RN中完成渲染: https://github.com

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 React Native组件化介绍 React Native的核心思想就是组件化,相当于MVC的view,因此开发应用的最佳方

react-native react native和原生Android/ios: https://www.oschina.net/news/97466/should-we-use-react-native react native优势 跨平台. 单纯用RN开发是很棒的,单纯用原生ios/Android开发也是很棒的. 但是RN和原声ios/Android混合开发是糟糕的,因为:如果你需要在同一屏幕上同时使用原生视图和 React Native 视图,通常,在 React Native 方面,你会

前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 App 的尝试,其示例代码相当简洁,内置控件也不少.Facebook 同时还为 React Native 开发了一款基于 Atom 的IDE——Nuclide,也已开源. 在线演示      GitHub 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶

React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableView也可以实现UICollectionView. ListView的使用方法: 1.首先创建一个ListView.DataSource数据源,然后向他传递一个普通的数据源数组. 2.使用该数据源实例化一个ListView组件,定义一个renderRow回调函数,这个函数会接收数组中的每个数据作为参

React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以看到点击效果,TouchableHighlight只可以进行嵌套一层.其常用属性如下: activeOpacity  点击时,组件的透明度.0-1 onHideUnderlay       当底层被隐藏时调用 onShowUnderlay 当底层显示时调用 style   风格 underlayCo

React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情况下,Text组件在两个平台上显示都正常. 可以看到,在垂直方向上,Text组件要比字高,上下都留有富余的空间,这样显示出来美观.但如果仔细看,就会发现Android平台的显示下方所留的控件比IOS平台的显示下方所留的空间要小一些.在IOS平台上,上下富余的空间基本相等:而在Android平台上,上

以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native-tab-navigator的使用传送门 TabBarIOS部分 在目前市面上的APP中,大部分都是选项与选项之间的切换,比如:微信.微博.QQ空间......, 在iOS中,我们可以通过TabItem类进行实现.那么,在React Native中,我们应该怎么实现呢? 在React Native中可以通过T

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 Image组件的常见属性 属性方法 onLoad(function):当图片加载成功后,回调该方法 onLoadStart(f

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第

react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 https://github.com/jpush/jpush-react-native react-native-jpush 由 React Native 中文网开发维护. https://github.com/reactnativecn/react-native-jpush pouchdb-re

安装前注意: 1)在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题.可以使用下面的命令修复: sudo chown -R `whoami` /usr/local 2)如果命令行提示command not found,请加上sudo获得最高权限    一.环境需求 1.1  安装Homebrew Homebrew是OS X的套件(包)管理器,用于安装Node.js和一些其他必须的工具软件. 安装方式: ru

在前面的登录界面中,我们发现所有的组件不会对用户的点击.触摸.拖拽做出合适的响应,这是十分不友好的.那么,在React Native中如何让视图对触发做出合适的响应呢? 一.高亮触摸  TouchableHighlight 当手指点击按下的时候,该视图的不透明度会进行降低同时会看到相应的颜色,其实现原理则是在底层新添加了一个View.此外,TouchableHighlight只能进行一层嵌套,不能多层嵌套. 常用属性: activeOpacity  number 设置组件在进行触摸的时候,显示的

一.前言 在开发中还有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源. 二.Image组件的基本用法 2.1 从当前项目中加载图片 <View style={styles.container}> <Text style={styles.textMarginTop}>加载本地的图片</Text> <Image source={require('./img/2.png')} styl

学习iOS开发的同学应该都知道UITableView,几乎每个APP中都有它的存在,而且衍生出各种形态:那么同样,ListView就是在React Native中的tableView,而且更加简单和灵活易用:让我们一起搞定它. 一.前言 ListView组件是React Native中一个比较核心的组件,用途非常的广: 该组件设计用来高效的展示垂直滚动的数据列表: 1.1   首先创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组: 1.2  使用数据源(dat

一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们一起来搞定它! 一个包装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统. 两个要点: a)ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作). 通常有两种做法: 第一种: 直接

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第

一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需要指定props作为节点的属性. 一般组件很少需要对外公开方法(例外:工具类的静态方法等),唯一的交互途径就是props.所以说它也是父组件与子组件通信的桥梁. 组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改. 状态(state) 它是组件的内部状