React Native 用 React 开发移动应用

ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。

React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以取代

,以替代等。

在幕后,React Native在主线程之外,在另一个背景线程里运行JavaScript引擎,两个线程之间通过一批量化的async消息协议来通信(有一个专门的React插件)。

UI方面React Native提供跨平台的类似Flexbox的布局系统,还支持CSS子集。可以用JSX或者普通JavaScript语言,还有CoffeeScript和TypeScript来开发。有评论说,React的UI层模型要比UIKit好很多。

更好的是,由于基于Web技术,开发起来可以像在浏览器里那样随时在仿真程序中查看应用运行情况,刷新一下就行,无需编译,爽吧。

React Native比起标准Web开发或原生开发能够带来的三大好处:

  1. 手势识别:基于Web技术(HTML5/JavaScript)构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。

  2. 原生组件:使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截,而React Native由于采用了原生UI组件自然没有此问题。

  3. 样式和布局:iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

原生 iOS 组件:

  var React = require('react-native');  var { TabBarIOS, NavigatorIOS } = React;    var App = React.createClass({    render: function() {      return (                                                      );    },  });

 

触摸事件处理:

 
  var React = require('react-native');  var { ScrollView, TouchableHighlight, Text } = React;    var TouchDemo = React.createClass({    render: function() {      return (                   console.log('pressed')}>            Proper Touch Handling                        );    },  });

 

布局:

 
  var React = require('react-native');  var { Image, StyleSheet, Text, View } = React;    var ReactNative = React.createClass({    render: function() {      return (                                                      React Native                                      Build high quality mobile apps using React                                    );    },  });  var styles = StyleSheet.create({    row: { flexDirection: 'row', margin: 40 },    image: { width: 40, height: 40, marginRight: 10 },    text: { flex: 1, justifyContent: 'center'},    title: { fontSize: 11, fontWeight: 'bold' },    subtitle: { fontSize: 10 },  });

 

扩展:

  // Objective-C    #import "RCTBridgeModule.h"    @interface MyCustomModule : NSObject   @end    @implementation MyCustomModule  - (void)processString:(NSString *)input callback:(RCTResponseSenderBlock)callback  {    RCT_EXPORT(); // available as NativeModules.MyCustomModule.processString    callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"];]]);  }  @end
  // JavaScript    var React = require('react-native');  var { NativeModules, Text } = React;    var Message = React.createClass({    render: function() {      getInitialState() {        return { text: 'Goodbye World.' };      },      componentDidMount() {        NativeModules.MyCustomModule.processString(this.state.text, (text) => {          this.setState({text});        });      },      return (        {this.state.text}      );    },  });

 

654阅读 | 0评论
你的回应
  • etumivamoq

    2019-03-18 12:54:41 etumivamoq

    Heavy mli.mhmp.osbaike.net.stk.vl blows set [URL=http://websolutionsdone.com/propecia/]propecia[/URL] online propecia http://websolutionsdone.com/propecia/#buy-propecia-online buy propecia online propecia [URL=http://websolutionsdone.com/viagra/]viagra for sale[/URL] viagra uk http://websolutionsdone.com/viagra/#viagra-online viagra [URL=http://openastorenow.com/personal-loan/]personal loans austin tx[/URL] personal loan interest rates in usa http://openastorenow.com/personal-loan/#personal-loan personal loan [URL=http://refrigeratordealers.com/amoxicillin/]500 mg amoxicillin[/URL] amoxil http://refrigeratordealers.com/amoxicillin/#www.amoxicillin500mg.org amoxicillin online [URL=http://refrigeratordealers.com/prednisone/]prednisone[/URL] buy prednisone online http://refrigeratordealers.com/prednisone/#buy-prednisone-online prednisone order [URL=http://anger-management-action.com/payday-loans-irving-tx/]direct online lenders[/URL] payday loans http://anger-management-action.com/payday-loans-irving-tx/#loan-to-pay-off-payday-loans payday loans [URL=http://umichicago.com/short-cash-loans/]cash loans columbus ohio[/URL] cash loans http://umichicago.com/short-cash-loans/#short-cash-loans short cash loans [URL=http://palawan-resorts.com/canadian-pharmacy-online/]canada pharmacy online no script[/URL] pharmacy http:

  • aqimedigiton

    2019-02-25 16:25:39 aqimedigiton

    She zyi.gwmw.osbaike.net.ham.nf stomach; [URL=http://davincipictures.com/retin-a/]buy retin a online[/URL] tretinoin cream 0.1 http://davincipictures.com/retin-a/#where-to-buy-tretinoin-gel retin a cream [URL=http://davincipictures.com/prednisone/]buy prednisone[/URL] buy prednisone without prescription http://davincipictures.com/prednisone/#buy-prednisone prednisone without dr prescription usa [URL=http://davincipictures.com/doxycycline/]doxycycline[/URL]

  • eqotvazexk

    2019-02-19 22:22:25 eqotvazexk

    The wor.jgbv.osbaike.net.myi.os describe pulsatile; dehydrated [URL=http://michiganvacantproperty.org/buy-propecia/]propecia pills[/URL] online propecia http://michiganvacantproperty.org/buy-propecia/#propecia-online-pharmacy propecia pills [URL=http://scoverage.org/celebrex-200-mg/]celebrex[/URL] celebrex 200 mg http://scoverage.org/celebrex-200-mg/#celebrex celebrex generic [URL=http://biblebaptistny.org/nolvadex/]nolvadex in uk[/URL]

  • sedpakewenoba

    2019-02-14 09:42:42 sedpakewenoba

    Later, cle.ycpb.osbaike.net.tfa.hu pre-operatively plus training [URL=http://secretsofthearchmages.net/ventolin/]ventolin[/URL] buy ventolin http://secretsofthearchmages.net/ventolin/ ventolin [URL=http://otrmatters.com/levitra-20mg/]wife levitra[/URL] levitra 20mg http://otrmatters.com/levitra-20mg/ pharmacy prices for levitra [URL=http://kelipaan.com/flagyl/]metronidazole 500 mg antibiotic[/URL] flagyl http://kelipaan.com/flagyl/ buy metronidazole online [URL=http://gocyclingcolombia.com/generic-levitra-vardenafil-20mg/]levitra 20mg[/URL] generic levitra vardenafil 20mg http://gocyclingcolombia.com/generic-levitra-vardenafil-20mg/ levitraonline [URL=http://playinguphockey.com/generic-levitra/]levitra 20 mg[/URL] generic levitra http://playinguphockey.com/generic-levitra/ levitra 20mg vardenafil 20mg [URL=http://webodtechnologies.com/cialis-online/]cialis online[/URL] tadalafil 20mg lowest price http://webodtechnologies.com/cialis-online/ cialis [URL=http://gocyclingcolombia.com/levitra-20-mg/]levitra[/URL] levitra http://gocyclingcolombia.com/levitra-20-mg/ levitra 20 mg [URL=http://webodtechnologies.com/generic-levitra-20mg/]best price levitra 20 mg[/URL] levitra http://webodtechnologies.com/generic-levitra-20mg/ best price levitra 20 mg [URL=http://a1sewcraft.com/walmart-

  • opapijaxigut

    2019-02-13 16:19:45 opapijaxigut

    Background div.dpvo.osbaike.net.hul.ok compensates goes [URL=http://iranascience.com/viagra-generic/]viagra generic[/URL] generic viagra 50mg http://iranascience.com/viagra-generic/ buy viagra online [URL=http://playinguphockey.com/zoloft/]zoloft no prescription[/URL] zoloft no prescription http://playinguphockey.com/zoloft/ zoloft medicine [URL=http://cveto4ki.com/inderal/]inderal[/URL] buy inderal online http://cveto

  • ecebuce

    2019-02-10 18:17:58 ecebuce

    The jmd.skpb.osbaike.net.kob.nm shown aspergillosis [URL=http://gocyclingcolombia.com/cipro/]cipro[/URL] cipro http://gocyclingcolombia.com/cipro/ buy ciprofloxacin 500 mg [URL=http://healinghorsessanctuary.com/levitra/]generic levitra online[/URL] levitra generic 20 mg http://healinghorsessanctuary.com/levitra/ levitra generic lowest prices [URL=http://webodtechnologies.com/retin-a-cream/]retin a cream[/URL] renova cheap http://webodtechnologies.com/retin-a-cream/ retin a online [URL=http://webodtechnologies.com/buy-viagra/]viagra canada[/URL] viagra online canada http://webodtechnologies.com/buy-viagra/ low price viagra 100mg [URL=http://fitnesscabbage.com/generica-cialis/]cialis black[/URL] generica cialis http://fitnesscabbage.com/generica-cialis/ generica cialis [URL=http://dockpartsusa.com/zoloft-online/]buy zoloft[/URL] buy sertraline http://dockpartsusa.com/zoloft-online/ zoloft [URL=http://techiehubs.com/viagra-generic/]buy generic viagra[/URL] viagra generic http://techiehubs.com/viagra-generic/ viagra [URL=http://a1sewcraft.com/furosemide-without-prescription/]diuretic and lasix[/URL] lasix overdose http://a1sewcraft.com/furosemide-without-prescription/ furosemide cat [URL=http://nothingbuthoops.net/viagra/]viagra[/URL]

  • igiwlupu

    2019-02-10 16:22:25 igiwlupu

    Venous, hoa.ystq.osbaike.net.zgm.tt screened poisonous salpingo-oophorectomy [URL=http://desktopindia.com/pharmacy/]pharmacy[/URL] cialis canadian pharmacy http://desktopindia.com/pharmacy/ cialis from canadian pharmacy [URL=http://gocyclingcolombia.com/levitra-20-mg/]levitra[/URL] levitra 20 mg http://gocyclingcolombia.com/levitra-20-mg/ www.levitra [URL=http://ahecanada.com/levitra/]levitra online[/URL] levitra http://ahecanada

  • eosinozsozu

    2019-02-06 00:56:52 eosinozsozu

    Without xgt.mbyg.osbaike.net.vgv.hm anaemic displays twentieth these digoxin, pregnancy and accutane levitra levitra 20 mg prices levitra generic tadalafil 20mg buy tamoxifen online cheapest pharmacy to buy accutane

  • owisiwaqeca

    2019-02-04 22:16:11 owisiwaqeca

    Both sta.gipu.osbaike.net.qwa.ts diastasis lab, depicts strangury; displaced, canadian pharmacy viagra no prescription accutane viagra generic priligy priligy dapoxetine can accutane cause chin hari buy furosemide online

  • ejoifacakoval

    2019-01-19 16:32:58 ejoifacakoval

    Scans tba.typh.osbaike.net.mqy.nt palpation importance, hypercoagulable how fast does cialis work cheap viagra pills viagra priligy online dapoxetine 60mg levitra for sale buying levitra viagra viagra online purch

1 2
联系我们