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

一.简介 在讲本篇博文之前,需要你熟知怎么自定义ReactNative组件,然后才好学习将自定义的ReactNative组件制作成第三方库.本文中的自定义的ReactNative组件LoginManager API 源自上篇文章,所以需要先看一下上篇博文.言归正传,ReactNative的确提供了一个非常便捷的方式来扩展Native模块.如果要把模块做成第三方组件的话,还有一些工作要做:首先以一个静态库工程来编译模块代码,提供JavaScript的封装,最后创建Package.json来支持no…

前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持.对性能有要求的情况下还是需要进行一定的原生的开发,合理的组件实现方式可以降低使用和跨平台的成本. (底层实现分析参见:React-Native 渲染实现分析,本文仅讨论组件开发方法) React Native组件开发 RN的组件开发有几种方式,JS组件.Native功能组件.NativeUI组件.J…

前言 由于业务需要做成类似腾讯课堂课程详情滚动的效果,考虑到后面有可能有新的呈现方式,RN提供的组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写的比较乱,周末花了点时间重写梳理下做的东西. 项目地址 在这里,如果有好的意见欢迎提 issue或pr. 开始 我们先来看下,腾讯课堂视频播放详情页面是怎么样的? 咋一看界面感觉有点复杂,其实简化来说,这个界面可以看成tab组件+scroll组件.哲学上说,要抓好主要矛盾与次要矛盾,这个问题的主要矛盾是scroll组件实现,也就是最外层的R…

转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-component-packaging-and-traditional-values/ 刚接触React-Native的时候也是看官方文档,官方文档就是讲的基础的组件与与基础的API,然后就开始写一些简单的界面,但是发现自己写的简单界面代码非常的长,修改起来也是非常的麻烦,维护起来非常的费尽.那么今天就简单的介绍一下组件的封装和传值吧.你会发现节…

style: { height: 100, textAlign: 'center', textAlignVertical: 'center', } 以上方法在Android上显示水平垂直居中, 但在IOS上只能水平居中, 方法是在IOS上添加lineHeight: 100, 如下 style: { height: 100, textAlign: 'center', textAlignVertical: 'center', ...Platform.select({ ios: { lineHeigh…

一.前言背景: 学习react native的关键在于组件,依靠组件的拼接达到想要的效果,由此可见,组件就像一块块功能各异的零件,最终搭建出我们想要的效果. 今天我们就从组件的导入.导出开始 下面是我们编写react native代码时,很普遍的代码范式: import React, {Component} from 'react' import {View, Text} from 'react-native' export default class Example extends Compo…

1.通过 AsyncStorage 将值保存在本地(最低端的方法) import { AsyncStorage, } from 'react-native'; // 保存 IP AsyncStorage.setItem('LoginIP',new_value); // 获取IP let ApiBase; AsyncStorage.getItem('LoginIP') .then((value) => { that.setState({ ApiBase: value }); }); 2.定义成员属…

好早之前整理的部分组件,不全 怕丢…

想要实现轮播效果,首先安装时间定时器 接下来就是在我们的项目中使用定时器 接下来我们将竖着的轮播图变成横着的 接下来我们调整间距 我们知道轮播图下方,还有5个圆点,那我们怎么做呢? 拿到每一个圆点 看对应的样式 关于当前样式和小圆点颜色的改变 见成品图 我们要达到的效果是,哪一个轮播图在前面,对应的小圆点就变色 我们在每一帧滚动结束的时候,进行调用对应的函数 通过偏移量与宽度比求对应页面,再更新状态机 最后再看效果图 我们发现我们的轮播图一直都是手动的,我们需要使用定时器让其自动播放 我们设置固…

最近在阅读RN的文档,但有一点深感遗憾的是——官方对绝大多数RN组件没有用Gif图或者静态图的方式呈现给大家. 所以我通过百度查询,一个一个的查到了这些RN组件的UI表现图,下面呈现给大家   阅前必读 首先表示抱歉,我没有注明每幅图片的url来源,这是有原因的,因为当前有很多人的博客转载他人的博客却没有注明出处,如果我莽撞地写上我找到该图片的url地址,那么可能反而会损害原作者本人,如果您看到这篇文章中使用了您的图片,还请您通过评论或者私信告诉我,我将会将您的原创地址添加到图片之后.当然图片的…

1.所有的属性类型 2.代码 import PropTypes from 'prop-types'; type Props = {}; export default class App extends Component<Props> { static defaultProps = { name: '张三' } static propTypes = { name: PropTypes.string } render() { return ( <View style={styles.con…

在我们做ReactNative项目的过程中,我们会发现由ReactNative提供给我们的组件或API往往满足不了我们的需求,常常需要我们自己去封装Native组件. 今天我们介绍下如果封装一个简单的ReactNative组件,Native代码采用Android. 需求:实现一个组件.实现类似Android的Toast功能. 1.创建一个RN project [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 react-native init Hy…

来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React Native系列https://github.com/jondot/awesome-react-native 目…

以下链接是自己开发RN工程时参考的一些不错的资料,给喜欢学习的朋友分享以下. React-Native组件用法详解之ListViewhttp://www.jianshu.com/p/1293bb8ac969http://reactnative.cn/docs/0.48/listviewdatasource.html#content ReactNative Text的属性和样式http://blog.csdn.net/sjzx3142/article/details/53393310 React…

此文已由作者王翔授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 使用react-native的时候能够看到不少函数调用式的组件,像LinkIOS用来呼起url请求  LinkIOS.openUrl('http://www.163.com'); actionSheetIOS用来实现ios客户端底部弹起的选择对话框 ActionSheetIOS.showActionSheetWithOptions({   options: BUTTONS,   cancelButtonIn…

React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React-Native系列 https://github.com/jondot/awesome-react-native 教程 react-native 官方api文档 http://facebook.github.io/react-native/docs/getting-started.html reac…

自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React-Native系列 https://github.com/jondot/awesome-react-native 教程 react-native 官方ap…

自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React-Native系列 https://github.com/jondot/awesome-react-native 教程 react-native 官方ap…

原文:  http://www.w3ctech.com/topic/909 自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React-Native系列 https://github.com/jondot/awe…

自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React-Native系列 https://github.com/jondot/awesome-react-native 教程react-native 官方api文…

hybrid app.react-native 区别: 项目 hybrid app react-native 组件 用HTML.CSS.JavaScript实现页面的制作,然后运行在Webview上(模拟原生组件) 封装了原生组件,性能更好…

App效果: 功能和交互简单描述: 针对微信使用用户每天的零碎时间来进行天气,新闻要点等查看,免去了打开其他App来查看; 针对每一天可以设置一项重要任务计划,可开启通知提醒,让每一天任务简化,免去太多任务计划导致不能按时执行: 很多人在每一天玩手机时间过长,耽误了工作生活,专注时间功能开启,即统计用户远离手机的时间,把手机放在一边,专注于工作生活吧: 对历史上的今天发生的大事进行随机展示,告知用户时间的重要性,珍惜当下- 先上技术要点说明目录,后续每个技术要点以一篇文章来讲解: 注意: Rea…

1.你如何通过一个intent来唤醒activity? this.startActivity(intent,request);      2.什么是显式.隐式的intents? 显式:指定组件名,通常用于项目内部使用.        隐式:并不指定目标的名字(组件名字字段是空的).隐式intent经常用于激活其它应用程序中的组件      3.intent的组成? Intent对象由以下六个部分组成: Component name:Component name即组件名称,是要处理这个Intent…

Native原生相比于Hybrid或H5最大长处是具有流畅和复杂的交互效果,触摸事件便是当中重要一项,包括点击(Click).长按(LongClick).手势(gesture)等. 以最简单常见的点击(Click)为例,Native组件能够自己定义selector.使得被点击的组件具有动态效果,Android 5.0以上甚至能够有涟漪效果(Material Design).而这些在Hybrid或H5中非常难实现.非常多时候区分它们与原生最简单的方法就是检验点击交互效果. React-Native…

dvajs作为一个基于redux的状态管理框架,在react中的表现还是很不错的,如果我们想要在react-native应用中使用dvajs该怎么做呢? 首先安装dva-core和react-redux: npm i -S dva-core react-redux dva-core是dvajs的核心部分,能够很好的和其他react-native组件在一起工作. dva-core和dva在提供的方法上有一些区别,不过在使用思路上是完全一样的.由于基本没有什么难点,这里就直接贴代码了. 以下是一个r…

创建React-Native项目 打开终端输入react-native init ProjectName,这里的ProjectName可以改成你想创建的项目名称.然后有两种方法启动项目 1.从终端开启 在终端找到刚才创建的项目进入它的路径如cd ProjectName,之后启动它react-native run-ios即可. 2.从Xcode开启 在项目中找到以xcodeproj为后缀结尾的文件双击,即可在xcode打开项目,然后在xcode编辑器中点击启动按钮即可启动. React-Nativ…

直击现场 学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React-Native系列 https://github.com/jondot/awesome-react-native 教程 react-native 官方…

android 1.键盘会在 ScrollView 之上----不知道是不是未给ScrollView 设置高度的问题 2.navigation的标题在android居中显示办法 navigationOptions: { headerBackTitle: null, headerTintColor: '#080808', headerTitleStyle:{flex: 1, textAlign: 'center'}, headerStyle: {backgroundColor: 'white',…

前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. PS:任何新技术的尝鲜都一定要控制在自己能控制的范围内,失败了会有可替换方案,不要引起不可逆的问题,这样会给团队造成灾难性的后果. 事实上,RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快…