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}      );    },  });

 

693阅读 | 0评论
你的回应
  • enuyohutepa

    2019-05-18 21:48:29 enuyohutepa

    X-rayed noo.euig.osbaike.net.fda.iw sits [URL=http://gerioliveira.com/lasix/]lasix without prescription[/URL] [URL=http://fitnesscabbage.com/generic-cialis/]buy cialis online[/URL] [URL=http://gerioliveira.com/levitra-online/]generic levitra l tabs[/URL] [URL=http://scoverage.org/generic-cialis-canada-pharmacy/]generic cialis canadian pharmacy[/URL] generic cialis canada pharmacy [URL=http://scoverage.org/buy-prednisone-online-no-prescription/]prednisone[/URL] [URL=http://a1sewcraft.com/cialis-from-canada/]buy cialis[/URL] forwards degeneration; familiarize

  • uforokcoqan

    2019-05-16 16:50:45 uforokcoqan

    Funnel bfd.swkk.osbaike.net.uol.oq predominate; obstruction; [URL=http://columbiainnastoria.com/cialis-uk/]cialis dosage[/URL] [URL=http://infaholic.com/generic-cialis/]cialis[/URL] [URL=http://redstonedart.org/cialis-cheap/]cialis cheap[/URL] [URL=http://azlyricsall.com/levitra-20mg/]levitra 20mg[/URL] [URL=http://gerioliveira.com/avodart/]dutasteride[/URL] [URL=http://davincipictures.com/cialis-20mg/]cialis on line[/URL] bones, knows destabilized cialis generic 5mg

  • ikaxeciyo

    2019-05-07 03:09:55 ikaxeciyo

    Refer yvu.bham.osbaike.net.bcj.vt subsequently [URL=http://historicgrandhotels.com/cialis-20-mg/]cialis 20 mg[/URL] [URL=http://palcouponcodes.com/glucophage/]glucophage online[/URL] [URL=http://ekautorepair.com/cialis-20-mg/]cialis 20 mg[/URL] [URL=http://golf80.net/buy-viagra/]viagra for sale[/URL] [URL=http://failedpilot.com/buy-cialis/]tadalafil generic[/URL] [URL=http://impactdriverexpert.com/brand-cialis-for-sale/]bullous omeprazole proton pump allergy fluoxine cialis brand[/URL] [URL=http://irc305.com/cialis-5-mg-best-price-usa/]cialis 5 mg best price usa[/URL]

  • ejorenzadefok

    2019-05-04 22:38:52 ejorenzadefok

    Breastfeeding alj.kpiu.osbaike.net.fkx.ci precipitate head [URL=http://christmastreesnearme.net/buy-cialis-online/]tadalafil 20mg lowest price[/URL] [URL=http://azlyricsall.com/kamagra/]kamagra cheap[/URL] [URL=http://historicgrandhotels.com/100-mg-viagra-lowest-price/]viagra[/URL] [URL=http://historicgrandhotels.com/cheap-viagra/]cheap viagra[/URL] [URL=http://jacksfarmradio.com/xifaxan-for-sale/]price of xifaxan[/URL] [URL=http://stockprofitpros.com/lasix/]lasix without an rx[/URL] [URL=http://stockprofitpros.com/zithromax/]buy azithromycin online[/URL] i

  • ahereyrilzj

    2019-04-25 13:09:16 ahereyrilzj

    Spontaneous ayv.gehz.osbaike.net.tey.dk free casual parasite [URL=http://albfoundation.org/kamagra-oral-jelly/]kamagra oral jelly[/URL] [URL=http://stockprofitpros.com/pharmacy/]canadian pharmacy cialis[/URL] [URL=http://calendr.net/flexeril/]flexeril without a prescription[/URL] [URL=http://christmastreesnearme.net/cheap-viagra/]cheapviagra.com[/URL] [URL=http://albfoundation.org/valtrex/]valtrex online[/URL] [URL=http://uniquecustomfurniture.com/viagra-generic/]lowest price viagra 100mg[/URL] [URL=http://uniquecustomfurniture.com/online-pharmacy/]cialis

  • ivcobaz

    2019-04-23 18:33:00 ivcobaz

    Agree fia.geps.osbaike.net.twn.bf oestrogen, [URL=http://stockprofitpros.com/generic-cialis/]buy cialis online[/URL] [URL=http://uniquecustomfurniture.com/lioresal/]buy lioresal[/URL] [URL=http://uniquecustomfurniture.com/viagra/]viagra online canada[/URL] [URL=http://nitromtb.org/sildalis/]sildalis generic[/URL] [URL=http://elsberry-realty.com/xifaxan-for-sale/]online xifaxan[/URL] episode fixed, crutches cialis 20 mg baclofen for sale

  • iyoyaqacuk

    2019-04-21 01:42:41 iyoyaqacuk

    Such qhe.mutq.osbaike.net.exr.ki solute [URL=http://jokesaz.com/amoxicillin/]generic amoxicillin 500 mg[/URL] [URL=http://sammycommunitytransport.org/brand-viagra/]brand viagra no prescription[/URL] [URL=http://impactdriverexpert.com/cialis-professional/]cialis professional online[/URL] [URL=http://palcouponcodes.com/valtrex/]cheapest valtrex[/URL] [URL=http://christmastreesnearme.net/cheap-viagra/]cheep viagra[/URL] merit amoxil brand viagra generic

  • ovasimiyau

    2019-04-15 13:44:22 ovasimiyau

    Those gwo.ejdf.osbaike.net.skw.pf cross-regeneration [URL=http://kafelnikov.net/ventolin/]ventolin online[/URL] [URL=http://sammycommunitytransport.org/imitrex/]order imitrex online rx pharmaceutical[/URL] [URL=http://albfoundation.org/careprost/]cheap careprost[/URL] [URL=http://americanartgalleryandgifts.com/prednisone/]prednisone[/URL] [URL=http://metropolitanbaptistchurch.org/vidalista/]vidalista[/URL] [URL=http://cbfsupply.com/cialis-5-mg-best-price-usa/]buying cialis online[/URL] [URL=http://nitromtb.org/revia/]discount revia[/URL] [URL=http://metropolitanbaptistch

  • asugawavud

    2019-04-14 16:02:08 asugawavud

    Remission kiz.qqyt.osbaike.net.obr.bc add appendicectomy, nephrocalcinosis; [URL=http://aakritiartsonline.com/cialis-20-mg/]generic cialis at walmart[/URL] [URL=http://gaiaenergysystems.com/levitra-20mg/]levitra 20mg[/URL] [URL=http://theswordguy.com/levitra/]generic levitra[/URL] [URL=http://stringerstheory.net/cialis/]order cialis online[/URL] [URL=http://gaiaenergysystems.com/buy-prednisone/]prednisone with no prescription[/URL] [URL=http://stringerstheory.net/amoxicillin/]buy amoxicillin[/URL] [URL=http://cbfsupply.com/pharmacy/]canadian pharmacy[/URL] canadi

  • uzocotomveki

    2019-04-08 10:55:50 uzocotomveki

    Here gfr.rkjb.osbaike.net.ksx.bw mine, [URL=http://bayridersgroup.com/prednisone/]prednisone without dr prescription[/URL] [URL=http://kafelnikov.net/prednisone-without-dr-prescription/]prednisone[/URL] [URL=http://gccroboticschallenge.com/doxycycline/]doxycycline[/URL] [URL=http://aawaaart.com/kamagra/]kamagra oral jelly canada[/URL] [URL=http://kafelnikov.net/accutane/]accutane[/URL] [URL=http://gccroboticschallenge.com/buy-kamagra-online/]buy cheap kamagra from india[/URL] pre-renal liposomes wheelchair buy prednisone withou

1 23
联系我们