【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)
今天我们一起来看一下Switch选择开关控件以及Picker选择器控件的介绍完全解析以及最佳实践。
刚创建的React Native技术交流群(),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
(二)Switch选择开关控件
2.1.该为/iOS两个平台通用的两种状态的选择开关
2.2.Switch属性方法介绍(这边只介绍平台通用属性以及只适合Android平台上面的属性方法)
View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
disabled bool 如果该值为true,用户就无法点击switch开关控件，默认为false
onValueChange function 方法，当该组件的状态值发生变化的时候回调方法
value bool 该开关的值，如果该值为true的时候，开关呈打开状态，默认为false
2.3.Switch使用实例
①.基础Switch开关控件实例演示,添加点击开关状态切换，实例代码如下:
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
} from'react-native';
var SwitchDemo =React.createClass({
getInitialState() {
trueSwitchIsOn: true,
falseSwitchIsOn: false,
render() {
Swtich实例
this.setState({falseSwitchIsOn: value})}
style={{marginBottom:10,marginTop:10}}
value={this.state.falseSwitchIsOn}/&
this.setState({trueSwitchIsOn: value})}
value={this.state.trueSwitchIsOn}/&
const styles =StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
AppRegistry.registerComponent('SwitchDemo',() =& SwitchDemo);
运行效果如下:
②.Switch开关控件设置无法点击状态，该第一个Switch无法响应点击状态,实例代码如下:
var SwitchDemo =React.createClass({
getInitialState() {
trueSwitchIsOn: true,
falseSwitchIsOn: false,
render() {
Swtich实例
this.setState({falseSwitchIsOn: value})}
style={{marginBottom:10,marginTop:10}}
value={this.state.falseSwitchIsOn}/&
this.setState({trueSwitchIsOn: value})}
value={this.state.trueSwitchIsOn}/&
效果运行如下:
(三)Picker选择器控件
2.1.该Picker渲染iOS和Android平台上面的原生选择器组件，官方实例代码如下:
this.setState({language: lang})}&
2.2.Picker属性方法(这边只介绍平台通用属性以及只适合Android平台上面的属性方法)
View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
onValueChange function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数
itemValue:该属性值为被选中的item的属性值
itemPosition:该选择器被选中的item的索引position
selectedValue: any任何参数值，选择器选中的item所对应的值，该可以是一个字符串或者一个数字
style pickerStyleType 该传入style样式，设置picker的样式风格
enabled bool 如果该值为false，picker就无法被点击选中。例如:用户无法进行做出选择
mode enum ('dialog','dropdown') 选择器模式。在Android平台上面，设置mode可以控制用户点击picker弹出的样式风格
'dialog': 该值为默认值，进行弹出一个模态dialog(弹出框)
'dropdown':以picker视图为基础，在该视图下面弹出下拉框
prompt string 设置picker的提示语(标题),在Android平台上面，模式设置成'dialog',显示弹出框的标题
3.3.Picker使用实例
①.基础选择器控件实例:弹出框,实例代码如下:
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
} from'react-native';
var PickerDemo =React.createClass({
getInitialState: function() {
language: '',
render() {
Picker选择器实例
this.setState({language: value})}&
当前选择的是:{this.state.language}
const styles =StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
AppRegistry.registerComponent('PickerDemo',() =& PickerDemo);
运行效果如下:
②.基础选择器控件实例:设置弹出框标题,实例代码如下:
var PickerDemo =React.createClass({
getInitialState: function() {
language: '',
render() {
Picker选择器实例
this.setState({language: value})}&
当前选择的是:{this.state.language}
运行效果如下:
③.基础选择器控件实例:设置下拉选择框,实例代码如下:
var PickerDemo =React.createClass({
getInitialState: function() {
language: '',
render() {
Picker选择器实例
this.setState({language: value})}&
当前选择的是:{this.state.language}
运行效果如下:匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。谈谈APP架构选型：React Native还是HBuilder
时间： 12:03:57
&&&& 阅读：16164
&&&& 评论：
&&&& 收藏：0
导读：最近公司的一款新产品APP要进行研发，老大的意思想用H5来做混合APP以达到高效敏捷开发的目的。我自然就开始进行各种技术选型的调研，这里重点想说的是我最后挑选出的2款hybrid app开发技术方案：RN(react native)，HBuilder。React Native是大名鼎鼎的Facebook的开源技术框架，而HBuilder是国内的H5工具开发公 司DCLOUD的产品。我自己先总结下吧：这两个技术框架在开发效率上基本上可以媲美WEB开发的速度，RN强调的是&Learn once, write anywhere&，RN不强求一份原生代码支持多个平台；而HBuilder则可以实现类似JAVA的&Write once, run anywhere&，也就是说写一份代码，即可同时发布多平台，这个效率比原生开发而言自然会double。两者的原理其实都是基于JS在做前端开发，用JS去做桥接调用原生的API，最大的优点是方便做APP的动态更新而不用频繁去发布版本，当然hybrid的这种框架也有弱势缺点，就是目前原生APP的开发生态已经趋向成熟，一些第三方库和框架不仅丰富而且稳定，所以如果改用基于JS的Hybrid app方案来做，一定要考虑APP产品是否适合用这种技术来做。
下面我把一些网友对这两个框架的看法列举如下供参考：
RN -React Native部分&&&&&&&&&&&&&&&&&
React Native的核心实现：先简单说几点，详细的等回头更新。1. React Native里面没有webview，这货不是Hybrid app，里面执行JS是用的
JavascriptCore。2. 再说React Native的核心，iOS Native code提供了十来个最基本核心的类（RCTDeviceEventEmitter、RCTRenderingPerf等）、或组件（RCTView、RCTTextField、RCTTextView、RCTModalFullscreenView等），然后由React Native的JS部分，组成二十来个基本组件（Popover、Listview等），交由上层的业务方来使用（THGroupView）。3. 就如他们在宣传时所说，他们实现了一套类似css的子集，用来解决样式问题，相当复杂和强大，靠这个才能将Native的核心组件组成JS层的基本组件再组成业务端的业务组件，应该是采用facebook/css-layout & GitHub的C语言版本实现的（在ppt中我们看到了类似flex-direction: column一类的代码，这个正是css-layout支持的语法）。4. 在React Native中，写JS的工程师解决的是「将基本组件拼装成可用的React组件」的问题，写Native Code的工程师解决的是「提供核心组件，提供足够的扩展性、灵活性和性能」的问题。
React Native是什么？
其实这东西从Native开发来说，相当于重新发明了一个浏览器渲染引擎并且套一个React的壳，从Web开发角度来说，就是把原来React的后端换成了Native code来实现，就跟Flipboard最近搞的React Canvas 一样： Flipboard & GitHubreact-canvasReact Native的优势和劣势：：
优势相对Hybird app或者Webapp：1. 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题2. 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用3. 可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
优势相对于Native app：1. 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了&
劣势：1. 扩展性仍然远远不如web，也远远不如直接写Native code（这个不用废话解释了吧）2. 从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和iOS都要做相同的封装，概念转换就更复杂了。
HBuilder部分&&&&&&&&&&&&&&&&&&&&-
phonegap出的早，自然用的人多。phonegap自己的定位是混合开发hybrid，用原生+js；HBuilder的定位是纯js搞定一切。5+ 和 phonegap在能力、性能、开发便利性上都优于phonegap。
先看能力：5+ 有HTML5+和Native.js技术，HTML5+包含常用的跨平台的几百个API，能满足常规开发需求，而Native.js把40w原生api映射成js对象，这样js可以直接调原生。HTML5+和Native.js的组合形成了最强大的能力引擎。 而phonegap需要用原生工程师写原生插件并给js开发者封装接口才能实现js调原生能力，开发成本、对人的要求都不一样。
当然5+ 也支持原生插件，这点和phonegap类似。一个已经写好的原生sdk，无需使用Native.js重写，也可以通过5+ sdk来集成。详见文档中心 & 5+ App & 5+ SDK
5+的直接封装的跨平台api比较全，二维码、摇一摇、地图、微信分享、语音输入、推送这些常用api都是跨平台的，使用方便简单。详见 http://www.html5plus.org/
再看性能：
phonegap做的app，在低端Android手机上很难流畅运行，否则HTML5早就火了，原生开发早就被挤压了。Phonegap为了避免HTML5的体验不佳，采用了spa模式，但这个模式其实在低端机上也玩不转，而且代码非常复杂。5+ App的性能更高，它的动态效果都是被我们的增强引擎处理的，通过增强的引擎，可以在低端机上流畅的运行各种动态效果，比如侧滑菜单、下拉刷新、长列表滚动，见 官网首页 & App选项卡- 性能视频
最后看开发便利性：
phonegap没有专业开发工具，语法提示、调试、打包都很麻烦。而在HBuilder里，5+的语法api提示非常完善；把手机通过数据线连上电脑，HBuilder可以真机运行，保存一个页面立即在手机上看到效果，Android上还可以看console.log。而用phonegap，你改完一个页面，不得不先打包，然后安装在手机上，然后发现不对，然后改下代码，然后继续打包。。。关于打包，phonegap由adobe提供了云打包，但需要先在本机准备资源，然后提交到国外的服务器，而HBuilder是一键打包，更加方便。当然phonegap和HBuilder都支持本地打包，那样就需要点原生开发知识了。
除了工具和runtime，还有mui框架
phonegap只是一个手机runtime，没有HBuilder工具，更没有Mui框架。mui是目前最接近原生App的HTML5框架，它的体验比jqm、bootstrap等框架更接近原生，它的性能远高于jqm、bootstrap、Ionic、framework7等框架。这种性能差别原因有2，一方面是设计思路不同，mui坚持用原生js做，不依赖jquery或angularjs，因为框架的依赖越多，App性能越差；另一方面是因为mui调用了5+的底层原生加速，这比不带原生加速的框架更快。mui详见：http://dcloudio.github.io/mui/
当然phonegap有一个优势，就是能支持windows phone、blackberry，这方面5+确实没有支持。
优势：Dcloud的其他服务没具体用过，HBuilder用过，还是一个很不错的编辑器，整体体验还是不错，像代码提示很智能，基于Eclipse的二次开发能做出这样也挺厉害了。特别是对HTML语法支持浏览器兼容性很好。有个前端框架写CSS挺省事的。缺点：HBuilder Size太大，而且还得联网使用，整体体验还是Eclipse风格，相比我还是推荐使用Sublime。主要是做出了的应用就是网页的体验，这个实在是不适合用来做应用。做个WebApp还行。
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！