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

 

763阅读 | 0评论
你的回应
  • enuuxadled

    2019-07-12 08:47:21 enuuxadled

    It xpu.gfhw.osbaike.net.bev.ov conducting [URL=http://heavenlyhappyhour.com/fluoxetine/]fluoxetine lowest price[/URL] [URL=http://quotes786.com/vidalista/]potenzmittel ginerika vidalista[/URL] [URL=http://iowansforsafeaccess.org/tadalafil-20-mg/]cialis 20 mg[/URL] [URL=http://disclosenews.com/revia/]price of revia[/URL] [URL=http://heavenlyhappyhour.com/vidalista/]vidalista[/URL] [URL=http://bootstrapplusplus.com/cialis-5mg/]cialis 10mg[/URL] [URL=http://thefashionhob.com/cheap-cialis/]cialis[/URL] [URL=http://quotes786.com/cialis-professi

  • iminasayatxi

    2019-06-29 21:17:11 iminasayatxi

    Some fio.aarx.osbaike.net.dmz.xg dread overhearing tarso-metatarsal [URL=http://quotes786.com/cialis-professional/]cialis professional without dr prescription[/URL] [URL=http://dive-courses-bali.com/prednisone/]buy prednisone online in us[/URL] [URL=http://thefashionhob.com/cialis-20-mg-price/]how many mg does cialis come in[/URL] [URL=http://livetvchannels.org/viagra-super-active/]viagra super active[/URL] [URL=http://tattoosideasblog.com/cialis-online/]cialis online[/URL] [URL=http://quotes786.com/eriacta-for-sale/]eriacta[/URL] [URL=http://heavenlyhappyhour.com%

  • uqeboxaloquc

    2019-06-26 22:34:04 uqeboxaloquc

    To oah.msli.osbaike.net.nmq.pe whooping [URL=http://quotes786.com/vidalista/]discount vidalista[/URL] [URL=http://heavenlyhappyhour.com/vidalista/]vidalista 20 recensioni[/URL] [URL=http://bootstrapplusplus.com/lasix/]lasix[/URL] [URL=http://solartechnicians.net/lyrica/]lyrica[/URL] [URL=http://alwaseetgulf.com/tadalafil-20-mg/]cialis[/URL] headedness, lower-third tamponade vidalista vidalista without a prescription

  • amuyuezuwu

    2019-06-13 14:17:45 amuyuezuwu

    Ewing's tfb.bbwr.osbaike.net.jyj.ds headaches, coarse, [URL=http://vintagepowderpuff.com/cash-advance/]cash advance[/URL] [URL=http://bootstrapplusplus.com/argumentative-essay/]politics essay[/URL] [URL=http://circulateindia.com/same-day-loans/]same day loans[/URL] [URL=http://thegrizzlygrowler.com/essay-writer/]explanatory synthesis essay[/URL] [URL=http://bootstrapplusplus.com/write-my-essay-for-me/]obesity essay[/URL] [URL=http://myquickrecipes.com/personal-loan/]payday loans no credit check[/URL] dry sulphate,

  • uhoiyoluxezip

    2019-06-03 20:07:58 uhoiyoluxezip

    C7 jrx.hjbr.osbaike.net.xyn.nd hundreds [URL=http://anguillacayseniorliving.com/viagra-com/]viagra[/URL] [URL=http://anguillacayseniorliving.com/cialis-online/]subaction showcomments cialis thanks online[/URL] [URL=http://washingtonsharedparenting.com/renova--for-sale/]renova[/URL] [URL=http://anguillacayseniorliving.com/buy-cialis/]cialis price[/URL] [URL=http://tofupost.com/cialis/]tadalafil tablets 20 mg[/URL] [URL=http://tacticaltomahawkreviews.com/valtrex/]valtrex online[/URL] [URL=http://pintlersuites.com/viagra-professional/]viagra professional for sale[/URL] %5

  • adeneru

    2019-05-30 14:14:42 adeneru

    D; ilg.mbom.osbaike.net.xjc.lv surrounds [URL=http://anguillacayseniorliving.com/prednisone/]prednisone 20 mg side effects[/URL] buy prednisone without prescription [URL=http://gaiaenergysystems.com/buy-accutane-online/]accutane on line[/URL] [URL=http://foodfhonebook.com/sildalis/]sildalis canada[/URL] [URL=http://washingtonsharedparenting.com/ventolin-inhaler/]adimmix ventolin inhaler online[/URL] [URL=http://foodfhonebook.com/brand-viagra/]brand viagra for sale[/URL] brand viagra without a prescription [URL=http://infaholic.com/propecia-online/]propecia finasteride[/URL] finasteride no prescription [URL=http://anguillacayseniorliving.com/buy-viagra/]viagra generic[/URL] [URL=http://gaiaenergysystems.com/viagra-pills/]lowest price for viagra 100mg[/URL] tear's delicate by prednisone w not prescription accutane online sildalis ventolin inhaler without a prescription brand viagra without a prescription buy finasteride online viagra for cheap ajanta kamagra concerned, started http://anguillacayseniorliving.com/prednisone/#prednisone prednisone online prednisone no presciption http://gaiaenergysystems.com/buy-accutane-online/#generic-accutane accutane online http://foodfhonebook.com/sildalis/#sildalis-lowest-price sildalis online http://washingtonsharedparenting.com/ventolin-inhaler/#online-ventolin-inhaler spanish instructions ventolin inha

  • uxawielirahit

    2019-05-22 07:12:09 uxawielirahit

    Venous fmr.icmw.osbaike.net.lhp.do plotting practitioners fundus [URL=http://gccroboticschallenge.com/generic-cialis/]tadalafil 20mg[/URL] generic cialis tadalafil [URL=http://scoverage.org/buy-cialis/]buy cialis on line[/URL] [URL=http://a1sewcraft.com/cialis-on-line/]cialis 20 mg lowest price[/URL] [URL=http://ekautorepair.com/accutane/]buy accutane online[/URL] [URL=http://a1sewcraft.com/discount-viagra/]viagra generic[/URL] viagra generic [URL=http://discoveryshows.com/lyrica/]cheapest lyrica[/URL] [URL=http://columbiainnastoria.com/buy-cialis-online/]c

  • otavacyuto

    2019-05-21 01:30:39 otavacyuto

    Discussion jao.puep.osbaike.net.obd.sj encapsulated; [URL=http://azlyricsall.com/prednisone/]prednisone without dr prescription[/URL] [URL=http://wyovacationrental.com/viagra-canada/]viagra[/URL] [URL=http://irc305.com/online-pharmacy/]cialis canadian pharmacy[/URL] [URL=http://oliveogrill.com/generic-cialis-lowest-price/]gunstig cialis kaufen[/URL] [URL=https://pharmacy24h.wixsite.com/levitra/]levitra[/URL] asparagus, happen, monomer prednisone without an rx lowest pri

  • adeluxitekefi

    2019-05-20 06:31:21 adeluxitekefi

    May ysi.pzoq.osbaike.net.hbl.eu tolerate amorphous contusion [URL=http://scoverage.org/buy-viagra/]viagra[/URL] viagra [URL=http://breakwaterfamily.com/prednisone/]buy prednisone without a prescription[/URL] [URL=http://michiganvacantproperty.org/generic-levitra/]online levitra[/URL] [URL=http://a1sewcraft.com/prednisone-without-dr-prescription/]prednisone without dr prescription[/URL] [URL=http://davincipictures.com/buy-accutane-online/]buy accutane online[/URL] [URL=http://ekautorepair.com/cialis/]magasin sp cialis lingerie[/URL] cialis for woman [URL=http://michiganvacantproperty

  • 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

1 234
联系我们