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

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

(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Running)以及调试(Debugging) 4.React Native移植原生Android项目-已废弃 4.1.React Native移植原生Android项目-已更新版本-New 5.React Native进行签名打包成Apk 6.React Native库版本升级(Upgrading)与降级讲解…

Android Studio下载http://www.android-studio.org/ 第二章:Android Studio概述(一)http://ask.android-studio.org/?/question/791 第三章:使用 Android http://ask.android-studio.org/?/question/802 第四章 : Refactoring Code http://ask.android-studio.org/?/article/106 第五章:Remi…

[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1)先安装react-native版本,以0.50.0为例 npm install --save react-native@0.50.0 2)以指定版本,创建项目 react-native init demo --version 0.50.0 3.在项目中切换 react-native 版本 1)先修改…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…

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

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. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize number 设置ListView组件刚刚加载的时候渲染的列表行数,用这个属性确定首屏或者首页加载的数量,而不是花大量的时间渲染加载很多页面数据,提高性能. onChangeVisibleRows function (visibleRows,changedRows)=>void. 当可见的行发生变化的…

1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该ScrollView进行高度设置(不建议) 第二种: ScrollView中不要加{flex:1} ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者 2. ScrollView中常用的属性 contentContainerStyle StyleSheetPropType…

React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 react-native-keychain iOS KeyCha…

本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图…

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

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

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

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

在react 中,有时要使用 style 指定样式 ,如要跟随放大比例关系,展示图标. const stylebutton = {width:25*scalesize, height:25*scalesize}; 宽和高很容易,想用画个圆, border-radix 发现不能用,网上看了文章使用, 要使用  borderRadius:25*scalesize 对应的行高 lineHeight:25*scalesize ------------------------------ 还是需要看看怎么…

React Native 项目常用第三方组件汇总:  react-native-animatable 动画 react-navigation github : https://reactnavigation.org/docs/intro/ 路由组件 react-native-carousel && react-native-swiper 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-file…

react-native facebook官网:http://facebook.github.io/react-native/中文网:http://reactnative.cn/ react 官网地址:http://facebook.github.io/react/Github地址:https://github.com/facebook/react 阮一峰教程:http://www.ruanyifeng.com/blog/2015/03/react.html Redux:中文http://cn.…

Doctor命令检查所需环境 @2019年11月18日,React Native v新增了一个环境检查和诊断命令行,可以帮助新手修复环境,输出环境依赖报告. 先建好的一个React Native项目,命令行切换到该目录,执行下面的检查命令: npx react-native doctor 关于HTTPS 新建网络安全配置文件 在xml -> 新建文件network_security_config.xml <?xml version="1.0" encoding="…

记录一下自己暂目前了解和使用的一些开源库和官方文档和优秀博客介绍,希望对你有帮助☺️: 1.Toast: https://github.com/magicismight/react-native-root-toast 2.图标的使用: https://github.com/oblador/react-native-vector-icons 3.选择照片: https://github.com/lwansbrough/react-native-camera 4.二级菜单: https://gith…

Navigator已经被React Native废弃了.也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到.不过既然官方推荐的是react-navigation那我们就来看看这个东西到底有什么好的,值不值得用. 一句话概括的话,react-navigation非常值得用.之前配置一个Navigator非常的繁琐,但是使用react-navigation的任何一个导航组件都非常简单.项目的github地址在这里. react-na…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍配套视频教程「80 节实战课精通 React Native 开发」:此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而视频…

本文为老曾原创.转载需注明出处:viewmode=contents">http://blog.csdn.net/minimicall?viewmode=contents 在上一节中,我们通过一个相冊的制作来学习了React Native编写.这一节我们须要開始学习React Native的源代码. 学习源代码,从编译源代码開始. 首先.我们须要把代码从github中克隆下来. https://github.com/facebook/react-native.git 然后,我们能够切换到它的…

一.什么是Text组件? 一个用于显示文本的React组件,和Android中的TextView组件或者OC中的Label组件相类似,专门用来显示基本的文本信息:除了基本的显示布局之外,可以进行嵌套显示,设置样式,以及可以做事件(例如:点击)处理: 二.Text组件常用的属性方法 Attributes.style = {    color string    containerBackgroundColor string    fontFamily string    fontSize numb…

一.前言 文本输入框,相当于OC中的UITextField,在用法和属性方面,两者都有很大的借鉴之处:通过键盘将文本输入到应用程序的一个基本的组件: 二.TextInput的常见属性 因为TextInput是继承自UIView,所以View的属性TextInput也能够使用,一些样式类的属性在学习的时候可以参照View的相关属性. value 字符串型 文本输入的默认值 onChangeText 函数 监听用户输入的值:   keyboardType  键盘类型 决定打开哪种键盘,例如,数字键盘…

React-Native-Elements 一组开发RN的UI工具包(强烈推荐)…

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; min-height: 13.0px } span.s1 { } React-native-animatable 动画 react-native-carousel 轮播 reac…

来自: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 目…

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