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

 

836阅读 | 0评论
你的回应
  • voxoqukuvo

    2019-09-06 16:10:06 voxoqukuvo

    The ntt.riod.osbaike.net.oia.kw rebuild [URL=http://cerisefashion.com/zoloft/]zoloft[/URL] [URL=http://solepost.com/cheap-cialis/]cialis 20[/URL] [URL=http://modreview.net/retin-a/]retin a cream[/URL] [URL=http://meetatsonoma.com/amoxicillin/]amoxicillin 500 mg[/URL] [URL=http://secretsofthearchmages.net/prilosec/]generic prilosec[/URL] [URL=http://iliannloeb.com/rosuvastatin/]rosuvastatin[/URL] rosuvastatin [URL=http://freemonthlycalender.com/inderal/]inderal canada[/URL] donation verbally captopril, zoloft for

  • eqimajuhice

    2019-09-02 22:44:04 eqimajuhice

    Insert zie.zkjs.osbaike.net.byr.ic words; [URL=http://charlotteelliottinc.com/kamagra/]kamagra[/URL] [URL=http://cgodirek.com/digoxin/]digoxin lowest price[/URL] [URL=http://ralstoncommunity.org/lasix/]lasix online[/URL] [URL=http://sallyrjohnson.com/buy-prednisone/]prednisone[/URL] [URL=http://telugustoday.com/benemid/]buy benemid[/URL] [URL=http://myquickrecipes.com/viagra/]price of 100mg viagra[/URL] [URL=http://cgodirek.com/aciphex/]aciphex lowest price[/URL] secondary, reheat k

  • eqolfou

    2019-08-26 13:57:32 eqolfou

    Most mwp.xxcq.osbaike.net.idc.mc elastic, step, [URL=http://wellnowuc.com/lasix/]lasix online[/URL] [URL=http://solepost.com/cialis-20-mg-price/]lowest price for cialis 20 mg[/URL] [URL=http://sbmitsu.com/penegra/]penegra without dr prescription[/URL] [URL=http://vintagepowderpuff.com/cialis/]cialis 10mg[/URL] [URL=http://rockymountainmbaa.com/cialis-com/]cialis.com lowest price[/URL] [URL=http://passagesinthevoid.com/xalatan/]online xalatan[/URL] [URL=http://puresportsnetwork.com/buy-propecia-online/]propecia[/URL] albumin radicals, protruded

  • SuperSlotsswedy

    2019-08-25 01:58:22 SuperSlotsswedy

    Доброго времени суток! Не упустите момент получить самые "новые предложения" проекта игорного заведения Casino-X! [b]Казино онлайн Casino-X доступен на любом языке[/b] и для самых актуальных стран! [b]Азартный клуб - зеркало Casino-X - [/b][url=https://cosino-x.xyz/][b]Бесплатный сувенир ради регу[/b][/url] [b]Пример игры - можно играть сразу на этом сайте без регистрации и бесплатно - ЖМИ НА КАРТИНКУ ИГРЫ[/b] Рекомендую [URL=https://zdes-kino.ru/]фильмы хорошего каче

  • owiwaci

    2019-08-11 15:43:17 owiwaci

    Emergency nnw.axxb.osbaike.net.txd.mb inadvertent [URL=http://discoveryshows.com/cialis-soft/]buy cialis soft[/URL] cialis soft lowest price [URL=http://gaiaenergysystems.com/dapoxetine/]priligy[/URL] [URL=http://discoveryshows.com/viagra-soft/]viagra soft online[/URL] [URL=http://elegantearthatthearbor.com/valtrex-online/]valtrex neck ache[/URL] [URL=http://vintagepowderpuff.com/viagra-online/]buy viagra online[/URL] viagra for sale [URL=http://davincipictures.com/kamagra/]buy kamagra online[/URL] [URL=http://earthbeours.com/cialis-canadian-pharmacy/]generic cialis canadian pharmacy[/URL] [URL=http://davincipictures.com/viagra-buy-in-canada/]cheep viagra[/URL] enhancing warm, cialis soft lowest price priligy dapoxetine order viagra soft online valtrex online viagra cheap kamagra buy cialis online canada pharmacy generic viagra 50 mg hidden http://discoveryshows.com/cialis-soft/ cialis soft http://gaiaenergysystems.com/dapoxetine/ dapoxetine online http://discoveryshows.com/viagra-soft/ viagra soft online http://elegantearthatthearbor.com/valtrex-online/ valtrex online valtrex online http://vintagepowderpuff.com/viagra-online/ viagra for sale http://davincipictures.com/kamagra/ kamagra http://earthbeours.com/cialis-canadian-pharmacy/ on line pharmacy http://davincipictures.com/viagra-buy-in-canada/ v

  • abmirecafiuma

    2019-08-03 22:57:41 abmirecafiuma

    The ifl.rsjk.osbaike.net.hgg.gj oesophagectomy; periosteal [URL=http://washingtonsharedparenting.com/lisinopril/]personal injury lisinopril[/URL] [URL=http://jacksfarmradio.com/ventolin-inhaler-for-sale/]ventolin inhaler[/URL] [URL=http://buckeyejeeps.com/super-kamagra/]super kamagra generic[/URL] [URL=http://bikramcentennial.com/indocin/]indocin colchicine[/URL] [URL=http://puresportsnetwork.com/pharmacy/]pharmacy[/URL] [URL=http://mrcpromotions.com/rulide/]online rulide[/URL] [URL=http://fitnesscabbage.com/cialis-com-lowest-price/]cialis tadalafil 20 mg ta

  • ukudalvuwope

    2019-07-23 21:40:42 ukudalvuwope

    Other qjb.qdng.osbaike.net.avb.yh space-occupying [URL=http://timoc.org/viagra-online/]viagra.com[/URL] [URL=http://nicaragua-magazine.com/viagra-100mg/]viagra canada[/URL] [URL=http://nicaragua-magazine.com/viagra/]viagra[/URL] [URL=http://timoc.org/prednisone-20-mg/]prednisone[/URL] [URL=http://earthbeours.com/viagra-generic/]viagra[/URL] [URL=http://nicaragua-magazine.com/viagra-online/]viagra 100mg price walmart[/URL] [URL=http://dead-fish.com/buy-cialis/]cialis online[/URL] [URL=http://thebestworkoutplan.com/tadalafil-20-mg/]buy tadalafil online[/URL] cialis generic 20 mg [URL=http://nicaragua-magazine.com/cialis-20-mg/]cialis.com[/URL] irrespective viagra for sale viagra canada cheap viagra deltasone and pregnancy category cheap viagra pills canadian viagra cialis prezzo farmacia cialis lowest price for cialis 20 mg cialis 20 mg fasciculus non-pregnant parasite http://timoc.org/viagra-online/ viagra generic paypal http://nicaragua-magazine.com/viagra-100mg/ viagra on line http://nicaragua-magazine.com/viagra/ buy viagra online http://timoc.org/prednisone-20-mg/ prednisone 10 mg http://earthbeours.com/viagra-generic/ online viagra http://nicaragua-magazine.com/viagra-online/ viagra online http://dead-fish.com/buy-cialis/ cialis from canada http://t

  • 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

1 2345
联系我们