5 reactnative_html5-reactnative - CSDN
  • Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?使用React Native的...
    摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?使用React Native的正确姿势又是怎样呢?

    H5、React Native、Native应用对比分析

    离上次在北京开源中国盛典已经快一个月了,有点想念@oschina的小伙伴了。我必须承认oschina是国内最大的同性社交网站,这也是无可争议的事实,但是,我真想的是妹子!!![偷笑]。从上次演讲后,有一些同学陆陆续续问我演讲的PPT在哪,还有不少同学希望看到[手稿],这学习精神,在下实在是佩服啊。有着这么热情的小伙伴,我激动不已啊,所以在此公布[手稿],方便大家可以将[PPT]和[手稿]双手齐下,:)。2015年,我们要一起努力完成以前吹过的牛逼.....  下面是[多图预警],请考虑切wifi,土豪请无视我,也可拿红包砸我,:)   

    ---------------华丽丽的分割线,主题开始---------------------

    “存在即合理”。凡是存在的,都是合乎规律的。任何新事物的产生总要的它的道理;任何新事物的发展总是有着取代旧事物的能力。React Native来的正是时候,一则是因为H5发展到一定程度的受限;二则是移动市场的迅速崛起强调团队快速响应和迭代;三则是用户的体验被放大,用户要求极致的快感,除非你牛x(例如:12306最近修改手机号需要用户自己发短信接收验证码)。

    以下简单的介绍下H5、React Native、Native的含义

    最近三四年间,国内外的前端与全栈开发者社区都在坚持不懈地追寻使用JavaScript与HTML、CSS技术体系开发App内场景的核心工程技术。这种技术,在国内很多公司与团队中,被通称为H5。——童遥

    这段是取自@童老师给小二我新书作的序,没有断章取义的意思。很清楚,H5并不是狭义的HTML5新标签和API,而是工程化的“In App” technology。

    iOS/Android ——原生应用(都懂得,不解释)。

    React Native —— React & Native ,应运而生!

    一、React Native的出现

    React Native的出现,似乎是扛起的反H5的旗子。就像当年Facebook放弃H5,全部转向Native一样。这一点,我们需要认同和保持高度的清醒。那么,React Native是否又是在吞食Native的领地呢?技术的发展,是用户风向标的导向起的作用。任何一门技术的出现,都是当时用户需求的体现。

    我们应该从以下几点看待React Native的出现。

    "鉴往知来"——从过去的教训中总结经验,从用户的角度开拓未来,用户更希望产品迭代和稳定寻求一种平衡
    “HTML5差强人意,但是与原生应用相比还是有些差距”——为了更高的追求! 用户体验!
    “人才宝贵,快速迭代”——Web开发者相对较多,寻找平衡点
    “跨平台!跨平台!跨平台!”——单一技术栈,开发者的福音
    “xx是世界上最好的语言” ——工程学的范畴,没有最好,只有最适合,我还是补充一句,JS还是很好很好的。

    HTML5 vs React Native ? HTML5 : React Native
    结论(React Native):
    1、原生应用的用户体验
    2、跨平台特性
    3、开发人员单一技术栈
    4、上手快,入门容易
    5、社区繁荣

    二、3款应用效果

    注:以下所有对比均在iOS平台下



    上面3张图片,如果去掉第一张图的“HybirdApp”的字样,是否分得清哪个是React Native开发?哪个是Native应用。
    你的第一感觉是什么?

    三、工程方案

    为了评估3种方案的技术优势和弱势。我们需要开发功能大致相似的App。这里,我们使用了“豆瓣”的API来开发“豆搜”应用。该应用能够搜索“图书”、“音乐”、“电影”。想当年,豆瓣以“图书评论”走红,尤其是12年当红!豆瓣是一个清新文艺的社区,一个“慢公司”。最近有一则网传消息,注意是网传——“传京东投1.5亿美元控股豆瓣”。今天,不聊豆瓣,我们要聊一个工程化的问题。

    我们需要将3款App的功能做到一致,同时需要保持技术要点一致。比如React Native这里使用了TabBar,那么Native我们也必须使用TabBar。简单而言就是:功能一致,组件 & API一致。我们功能如下图所示:

    1、H5方案
    在H5/Hybird应用中,我们使用AngularJS开发单页webApp,然后将该WebApp内嵌入到iOS WebView中,在iOS代码中,我们使用Navigation稍微控制下跳转。
    WebApp地址:http://vczero.github.io/search/html/index.html
    WebApp项目地址:https://github.com/vczero/search (很简单的一个项目)
    H5/Hybird项目地址:https://github.com/vczero/search_Hybird

    2、React Native
    在React Native中,封装必要的功能组件。
    项目地址:https://github.com/vczero/React-Dou。
    项目结构如下图:

    3、Native(iOS)
    使用React Native大致相同的组件开发App,不使用任何第三方库,代码布局。
    项目地址:https://github.com/vczero/iOS-Dou

    四、对比分析

    很多时候,新技术的采用最希望看到的是数据,而不是简单说“用户体验棒,开发效率高,维护成本低”。不过,生活中也有这样的同学,知一二而能窥全貌。当然,本人生性胆小,也没有那么多的表哥和隔壁的老王,所以不敢早下定论,不敢太放肆。赵本山在《大笑江湖》中有句名言“May the force be with you”(别太放肆,没什么用)。因此,从以下几个方面做一个简单的对比。

    ---------------分析提纲----------------

    1、开发方式

    (1)代码结构
    (2)UI布局
    (3)UI截面图
    (4)路由/Navigation
    (5)第三方生态链

    2、性能 & 体验

    (1)内存
    (2)CPU
    (3)动画
    (4)安装包体积
    (5)Big ListView
    (6)真机体验

    3、更新 & 维护

    (1)更新能力
    (2)维护成本
    -----------------提纲---------------

    1、开发方式

    很多人说React Native的代码不好看,不好理解。那是因为前端工程师都熟悉了Web的开发方式。怎么解决这个问题呢,可以先看看iOS代码,断定不熟悉iOS的同学心里会默念“一万匹**马奔腾”。那时候,你再看React Native,你会觉得使用React Native开发App是件多么美好的事!OK,我们先来看下三者在开始“一款简单App”的代码结构。
    (1)代码结构
    H5/Hybird的开发模式,我们需要维护3套代码,两套是Native(iOS/Android)代码,一套是WebApp版本。这里,我们使用AngularJS作为WebApp单页开发框架。如下图所示。

    在React Native中,同样需要关注部分的Native代码,但是大部分还是前端熟悉的JavaScript。在“豆搜”应用中,代码结构如下:

    在Native开发中,更加强调Native开发者的能力。平台是:iOS/Android。

    结论:从前端角度而言,React Native跨平台特性,不要开发者深入的了解各平台就能开发一款高效App。同时,语言层面而言,JavaScript运用很广泛,入门门槛相对较低。React Native虽然抛弃了MVC分离实践,但是从业务角度而言,更为合理。一切而言:对前端,对移动领域是利好的消息。

    (2)UI布局
    “面容姣好”,合理的UI却总是跟着时间在变。那么UI布局就不是小事。
    Web开发布局目前大多是 DIV + CSS。
    React Native的布局方式是Flexbox。

       //JSX
      <ScrollView style={styles.flex_1}>
        <View style={[styles.search, styles.row]}>
          <View style={styles.flex_1}>
            <Search placeholder="请输入图书的名称" onChangeText={this._changeText}/>
          </View>
          <TouchableOpacity style={styles.btn} onPress={this._search}>
            <Text style={styles.fontFFF}>搜索</Text>
          </TouchableOpacity>
        </View>
        {
          this.state.show ?
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            />
          : Util.loading
        }
      </ScrollView>
      //样式
      var styles = StyleSheet.create({
          flex_1:{
            flex:1,
            marginTop:5
          },
          search:{
            paddingLeft:5,
            paddingRight:5,
            height:45
          },
          btn:{
            width:50,
            backgroundColor:'#0091FF',
            justifyContent:'center',
            alignItems:'center'
          },
          fontFFF:{
            color:'#fff'
          },
          row:{
            flexDirection:'row'
          }
        });

    而Native布局就有种让你想吐的感觉,尤其是iOS的布局。这里不是指采用xib或者Storyboard,而是单纯的代码,例如添加一个文本:

    UILabel *publisher = [[UILabel alloc]init];
    publisher.frame = CGRectMake(bookImgWidth + 10, 50, 200, 30);
    publisher.textColor = [UIColor colorWithRed:0.400 green:0.400 blue:0.435 alpha:1];
    publisher.font = [UIFont fontWithName:@"Heiti TC" size:13];
    publisher.text = obj[@"publisher"];
    [item addSubview:publisher];

    总结:React Native既综合了Web布局的优势,采用了FlexBox和JSX,又使用了Native原生组件。比如我们使用一个文本组件。
    <Text style={{width:100;height:30;backgroundColor:'red'}}>测试</Text>

    (3)UI截面图
    Hybrid方式截面图

    可以看到第一层列表页是完整的布局,实际上这就是Web页面;而第二层灰色的是Native的WebView组件。
    iOS UI截面图


    可以看到Native页面的组件特别多,即使是列表页,其中某一项都是一个组件(控件)。

    当然,我们就会想,能够完全调用原生组件呢?那样性能是否更好?
    React Native UI截面图


    可以清楚的看到React Native调用的全部是Native组件。并且层次更深,因为React Native做了组件的封装。如上图,蓝色边框的就是RCTScrollView组件。这就是React Native相比H5更高效的原因。

    (4)路由/Navigation
    在Web单页面应用中,路由由History API实现。
    而React Native采用的路由是原生的UINavigationController导航控制器实现。
    React Native NavigatorIOS组件封装程度高;Navigator可定制化程度高。
    Navigator方法如下:

    getCurrentRoutes() - returns the current list of routes
    jumpBack() - Jump backward without unmounting the current scene
    jumpForward() - Jump forward to the next scene in the route stack
    jumpTo(route) - Transition to an existing scene without unmounting
    push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to
    pop() - Transition back and unmount the current scene
    replace(route) - Replace the current scene with a new route
    replaceAtIndex(route, index) - Replace a scene as specified by an index
    replacePrevious(route) - Replace the previous scene
    immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes
    popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted
    popToTop() - Pop to the first scene in the stack, unmounting every other scene

    相对Native而言,这些接口更Native还是很相似的。

    //iOS UINavigationController  
    //相对Web而言,不用自己去实现路由,并且路由更加清晰         
    [self.navigationController pushViewController:detail animated:YES];

    "豆搜" WebApp路由(基于AngularJS)如下:

    "豆搜" React Native版本导航如下:

    "豆搜" iOS版本导航代码如下:

    总结:React Native封装的导航控制更容易理解。

    (5)第三方生态链
    “我的是我的,你的也是我的。 ”——我不是“疯狂女友”,我是React Native!
    我们缺少“城市列表”组件,OK,使用JSX封装一个;觉得性能太低,OK,基于React Native方案封装一个原生组件。
    这个iOS图表库不错,拿来用呗! => 完美!
    这一切都是基于React Native提供的模块扩展方案。
    所以说:iOS第三方库 + 部分JavaScript库 = React Native 生态库(可以知道,基于React Native的扩展方案是多么方便)

    2、性能 & 体验

    我们都很关注一款App性能。因此测试和体验App的性能很重要。以下测试,都是基于相同的case。
    测试平台:模拟器,iphone6,iOS8.4
    (1)内存
    首先,我们来看下Native应用占用的内存情况。一开始,原生应用启动后,占用内存是20~25M;针对相同的case,跑了2min,结果如下图:

    可以看出,峰值是87.9M,均值是72M;内存释放比较及时。

    我们再来看下Hybird App的情况。App已启动,占用内存35~55M;同样,跑了2min以上,结果如下图:

    可以看出,峰值在137.9M,因为整个应用在WebView中,内存释放不明显,存在缓存。

    最后,看下React Native的情况。App启动占用内存35~60M,同样跑2min以上,结果如下图:

    可以看出,峰值在142M,内存相对释放明显。

    总结:React Native和Web View在简单App上相差不大。二者主要:内存消耗主要是在网页数据上。

    (2)CPU
    我们可以看一下Native应用程序CPU的情况,最高值在41%。

    Hybird App的最高值在30%。

    React Native的最高值在34%。

    总结:CPU使用率大体相近,React Native的占用率低于Native。

    (3)动画
    React Native提供了Animated API实现动画。简单效果,基本OK。个人觉得React Native不适合做游戏,尤其布局能力。
    Native Animation提供UIView动画
    H5/Hybird:采用js动画能力
    总结:React Native Animated API / 封装Native动画库 可以满足基本需求

    (4)安装包体积
    Hybird App:
    34(App壳) + 5(HTML) + 125(Angular) + 29(An-route) + 6(min.js) + 4(min.css) = 203 KB。

    React Native:
    不含bundle: 843KB
    含bundle: 995KB

    Native
    83KB

    React Native框架包大小
    843(不含bundle) - 32(Hybird_app空壳,初识项目) = 811KB

    相比快速迭代和热更新,比Native多了811KB一点都不重要,我们将图片素材、静态资源线上更新缓存起来即可减少很多体积。
    总结:牺牲一点体积,换更大的灵活性!(世界上哪有那么美的事,除非丑,就会想得美,:) )。

    (5)Big ListView & Scroll 性能
    循环列表项500次: H5页面惨不忍睹
    React Native还可以接受
    Native 采用UITabView更高效,因为不渲染视图外部分。

    (6)真机体验
    机型:iphone4s,iOS7
    Native > React Native > Hybird
    如果非要给个数字的话,那我个人主观感受是:
    Native: 95%+ 流畅度
    React Native: 85~90% 流畅度
    H5/Hybird: 70% 流畅度

    总结:Native/React Native的体验相对而言更流畅。

    3、更新 & 维护

    (1)更新能力
    H5/Hybird: 随时更新,适合做营销页面,目前携程一些BU全部都是H5页面;但是重要的部分还是Native。
    React Native:React Native部分可以热更新,bug及时修复。
    Native:随版本更新,尤其iOS审核严格,需要测试过关,否则影响用户。

    (2)维护成本
    H5/Hybird: Web代码 + iOS/Android平台支持
    React Native:可以一个开发团队 + iOS/Android工程师;业务组件颗粒度小,不用把握全局即可修改业务代码。
    Native:iOS/Android开发周期长,两个开发团队。

    总结:React Native 统一了开发人员技术栈,代码维护相对容易。

    五、综合

    1、开发方式

    (1)代码结构: React Native更为合理,组件化程度高
    (2)UI布局:Web布局灵活度 > React Native > Native
    (3)UI截面图:React Native使用的是原生组件,
    (4)路由/Navigation:React Native & Native更胜一筹
    (5)第三方生态链:Native modules + js modules = React Native modules

    2、性能 & 体验

    (1)内存:Native最少;因为React Native含有框架,所以相对较高,但是后期平稳后会优于Native。
    (2)CPU:React Native居中。
    (3)动画:React Native动画需求基本满足。
    (4)安装包体积:React Native框架打包后,811KB。相比热更新,可以忽略和考虑资源规划。
    (5)Big ListView
    (6)真机体验:Native >= React Native > H5/Hybrid

    3、更新 & 维护

    (1)更新能力: H5/Hybird > React Native > Native
    (2)维护成本: H5/Hybird <= React Native < Native

    React Native定制难度相比Native有些大;但是具备跨平台能力和热更新能力。      

    说了这么多,最后个人建议:

    一个新的App完全可以采用React Native开发,这样成本会低很多。    

    关于演讲:

    PPT: http://www.oschina.net/doc/24007

    视频:http://www.oschina.net/question/865233_2145334 (这个演讲在移动专场下半场开场)       

    六、图书 & 工作机会

    最后说一下图书《React Native入门与实战》吧。这是一本[难产]的家伙,15年写的比较顺利,最后因为北京雾霾,印刷厂偶尔停工,一直在难产。前段时间,图书发往各地书店,到店比较迟,我猜测是因为雾霾,找不到高速出口~~目前该书由人民邮电出版社图灵原创出版,已经开卖了。本书主要是希望带领大家一起进入React Native开发领域,针对每个API和组件都有详细的案例,同时为了更好的实战,最后3章以实际案例(通讯录App,LBS App,基于豆瓣OpenAPI的搜索 App)给出,供大家参考。觉得入门是完全没问题的,后期大家可以一起交流,争取丰富国内React Native社区。   

    《React Native入门与实战》各网站购买地址:

    京东:http://item.jd.com/10089810271.html (目前应该都有货了,微信有同学传照片给我看了,铁粉哈)

                http://item.jd.com/11844102.html (京东自营,货源需要跟客服确认哦)

    互动:http://product.china-pub.com/4904552 (已经有货)

    天猫:https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.21.rc0yeu&id=525484671101&cat_id=2&rn=4690ef5b4e06412ffae4d1cc4f4dcc9a&user_id=1020536390&is_b=1 (天猫这家卖的还可以,不知道为啥京东看不到数据,京东应该才是技术买书的最爱啊,听说也预售了不少呢)

          

    展开全文
  • (一)前言 前几节课程我们对于React Native的一些基础配置,开发工具以及调试,Android项目移植做了相关讲解,今天一起来学习一下另外一个比较重要的知识点,就是React Native项目签名打包。 刚创建的React Native...

    转载请标明出处:

    http://blog.csdn.net/developer_jiangqq/article/details/50525976

    本文出自:【江清清的博客】


    ()前言       

            【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 

           前几节课程我们对于React Native的一些基础配置,开发工具以及调试,Android项目移植做了相关讲解,今天一起来学习一下另外一个比较重要的知识点,就是React Native项目签名打包。    

              刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要重复加群!欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

    在我们的React NativeFor Android应用开发完成之后,那么就需要进行发布上传应用市场了,在上传之后,那么有一个很重要的步骤就是签名打包。下面我们来详细看一下怎么样进行签名打包React Native应用。具体关于Android的签名文件生成(点击进入-注意翻墙)

    ()Android签名文件生成      

             上面有一个Android官方的签名生成方法的地址,大家可以进行详情查看,不过需要翻墙哦~。我现在给大家讲解两种签名生成的方法::keytool命令方式生成 ,②:AndroidStudio IDE进行生成。

            2.1.keytool命令生成签名秘钥

    我们可以命令行运行如下命令:

    keytool -genkey -v -keystore my-release-key.keystore  -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

    [注意].我这边环境变量已经配置了,注意上面的my-release-key这个名字可以自己取名,同时my-key-alias也是自己取名,其中第二个名称alias参数后边的别名,在后面你在为应用签名的时候需要用到,所以暂时记录一下这个别名。

    上面的命令我们需要输入密钥库(keystore)密码和对应秘钥的密码,然后设置名字,组织,国家,省份相关的信息,最后会生成my-release-key.keystore的签名文件。

    具体命令截图如下:


    现在我们去用户默认目录下面会生成my-release-key.keystore文件。具体截图如下:


           2.2.Android Studio IDE进行生成秘钥文件

    个人比较倾向于这一种方法,首先是图形界面的,而且少了命令行书写的问题,而且以前我记得在使用Eclipse开发Android的时候也一直使用这种方式,下面我们来看一下生成签名的具体步骤:

    首先打开AndroidStudio菜单选择build->Generate Signed APK 在打开的界面点击Next,会弹出下面的界面


             然后点击create new在弹出的界面中选择填写秘钥存放的位置,名称,密码。同样还要写别名的名字,证书的所有者,国家,组织以及城市相关信息。


    点击OK,会默认填写上创建好的签名的信息,


    最后点击finish会生成签名秘钥,不过大家请注意看这边生成的秘钥和第一个命令行方法的秘钥的后缀不太一样的,这边是以jks结尾的,不过也没问题哦~也是同样可以签名的。


          以上两种方式已经给大家演示了,打包签名的方法了,下面我们正式来进行配置打包生成APK了。

    ()Gradle配置

            3.1.Gradle配置

                 .首先我把刚刚成的签名文件复制到项目android/app文件夹下面(这边采用AS生成签名test.jks)


    然后进行修改项目中gradle.properties文件,进行添加如下的代码(注意下面的签名和别名的名称和上一步放入的test.jks要一样,下面两项分别填写签名和别名的密码)-我取的密码为ztt12345

    MYAPP_RELEASE_STORE_FILE=test.jks
    MYAPP_RELEASE_KEY_ALIAS=test_alias
    MYAPP_RELEASE_STORE_PASSWORD=ztt12345
    MYAPP_RELEASE_KEY_PASSWORD=ztt12345

    这一步我们是进行全局的gradlde进行变量化的配置,后边我们会在后边的步骤中给相应的应用进行签名。

    [注意].以上的签名秘钥请大家一定要妥善保管,因为在应用发布的时候需要的。

     3.2.给应用添加签名-配置局部应用Gradle文件

            直接在工程目录下得android/app/build.gradle中以下节点添加如下内容:

    ...
    android {
        ...
        defaultConfig { ... }
        signingConfigs {
            release {
                storeFilefile(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPasswordMYAPP_RELEASE_KEY_PASSWORD
            }
        }
        buildTypes {
            release {
                ...
                signingConfigsigningConfigs.release
            }
        }
    }
    …

    具体实例配置截图如下:


    ()生成签名包

             对于生成签名包得方式我们要分两种情况进行区分对待。第一种在项目目录android/app下有react.gradle文件的(这个采用react-nativeinit xxproject命令生成项目详情请看:点击进入第一讲)

    第二种是不存在react.gradle文件,主要是通过原生Android项目移植到React Native平台中(该生成详情详情请看:点击进入第四讲)。下面这两种方法都讲一下:

            4.1.对存在react.gradle文件的项目打包

    命令行切到reactnative主目录,然后运行下面的命令,请注意下面 android就是Android项目的目录名称

     cd android && ./gradlew assembleRelease

    这样运行截图如下:



           该命令运行结束之后,会在android/app/build/outputs/apk目录下面生成app-release.apk该文件,然后可以使用该apk进行上线发布。


    4.2.对与不存在react.gradle文件的项目打包

             这边因为react.gradle文件不存在,主要针对第四讲课程中的项目(Android原生项目移植到React Native平台)来进行举例。

    首先命令切换到该reactnative项目的主目录,然后运行以下的命令,生成assets文件夹

    mkdir -p android/app/src/main/assets

       紧接着运行以下命令,进行生成inde.android.bundle文件

    react-native bundle --platform android --dev false --entry-file index.android.js \
      --bundle-output android/app/src/main/assets/index.android.bundle \
      --assets-dest android/app/src/main/res/

    具体运行截图如下:


    生成该文件目录截图如下:


    最后运行之前的命令,进行代码和资源文件打包,生成的带有签名的apk还是在上面的目录中。

    cd android && ./gradlew assembleRelease

    ()运行Apk

            上面的步骤我们已经完成了项目的签名打包在对应的目录中生成中apk文件,下面我们直接运行以下的命令进行将apk安装到设备中,我这边直接采用了模拟器进行测试了。

    cd android && ./gradlew installRelease

    该命令会进行安装我们的apk到我们的设备中,不过该不会安装完自动打开我们的app,我们需要自己点击启动一下即可了。完美运行截图如下:


    ()最后总结

              今天我们主要介绍了React Native for Android项目如何创建签名,以及打包的具体方法。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

           尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

           关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

         关注我的微博,可以获得更多精彩内容

          

    展开全文
  • (一)前言 现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等),今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非常基础的组件View。 刚创建的React Native...

    转载请标明出处:

    http://blog.csdn.net/developer_jiangqq/article/details/50540718

    本文出自:【江清清的博客】


    ()前言

           【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 

           现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等),今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非常基础的组件View。

             刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要重复加群!欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

    ()View组件介绍

             View作为创建UI时候的最基础,最常用的组件。这边的View组件是支持FlexBox布局(对于FlexBox布局的详细使用讲解,请点击),CSS样式以及相关触摸处理的容器组件。该组件我们可以嵌套在其他视图View里边,并且可以包含很多种类型的子视图。在Web,Android,iOS 三种平台上面该View视图可以对应平台中的三种原生视图,其中iOS对于UIView

    ,Web端对应<div>标签,Android对于android.view。下面我们来看一个比较简单的实例:

    'use strict';
    var React = require('react-native');
    var {
      AppRegistry,
      View,
    } = React;
    var TestText = React.createClass({
      render: function() {
        return (
          <View style={{flexDirection:'row',padding:20,height:100}}>
            <View style={{backgroundColor:'red',flex:1}}>
            </View>
          </View>
        );
      }
    });

    上述例子,我们这般首先创建了一个View,该View高度为100 ,但是该View的padding为20,所以整体效果如下:


    如果把padding修改成margin:20的话,那么是效果如下:


    这个相信做过CSS ,原生布局开发的话,大家应该都能看得懂的。

           其实React Native开发,View设计的时候,也支持我们采用StyleSheet来进行书写控件的的布局,这样的话,我们的代码会更加的清晰以及便于维护了。其实React Native开发也更加推荐这种方式,下面我们采用StyleSheet来实现一下:

    'use strict';
    var React = require('react-native');
    var {
      AppRegistry,
      View,
      StyleSheet,
    } = React;
    
    var TestText = React.createClass({
      render: function() {
        return (
          <View style={styles.first_view}>
            <View style={styles.second_view}>
            </View>
          </View>
        );
      }
    });
    var styles = StyleSheet.create({
      first_view:{
        flexDirection:'row',
        height:100,
        padding:20
      },
      second_view: {
        backgroundColor:'red',
        flex:1
      },
    });
    AppRegistry.registerComponent('TestText', () => TestText);

    以上的代码我们发现使用StyleSheet,进行创建相关styles,然后赋值给styles对象,在控件中直接styles对象进行使用即可。还是比较OK的。

    ()View属性方法介绍

      View属性方法介绍如下:

    序号

    名称

    属性Or方法

    类型

    说明

    1

    accessibilityLabel

    属性

    string

     

    2

    accessible

    属性

    bool

    当为trues时,表示该元素是可以进行访问,默认情况下

    所有可触摸的元素控件都是可以访问的

    3

    onAccessibilityTap

    方法

    function

    该党accessibletrue的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势

    4

    onLayout

    方法

    function

    当组件的布局发生变动的时候,会自动调用下面的方法:

    {nativeEvent: { layout: {x, y, width, height}}}。该事件当重新计算布局的时候会立即进行触发,不过界面可能不会立即刷新,特别当布局动画正在加载中的时候。

    5

    onMagicTap

    方法

    function

    accessibletrue的时候,当用户双指点击(Magic Tap)的时候,进行触发

    其他的一些方法如下(下面很多是关于事件响应者链的,基本都是比较简单的,就不着重讲解的,有兴趣大家都可以去测试一下):

    onMoveShouldSetResponder,onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,onResponderReject,onResponderRelease,onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,pointerEvents enum('box-none', 'none', 'box-only', 'auto')(触摸事件是否可以进行穿透控件View);

    removeClippedSubviews:该控件由于进行优化性能,尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多,已经超过父容器,并且子视图和付容器视图都有overflow:hidden风格样式。

    【注】关于上面一些方法的具体使用,后面在讲到事件响应者的时候会进行着重讲解。

    ()View风格Style介绍

             React Native中的Style风格布局,其实和CSS样式有很多相似的地方,这边介绍一下:

    Style标签

    说明

     Style标签

    说明

    FlexBox

    弹性布局(详细点击了解)

    transforms

    动画属性(详细点击了解)

    backfaceVisibility

    enum('visible', 'hidden')定义界面翻转的

    时候是否可见

    backgroundColor

    背景颜色

    borderColor

    边跨颜色,这边几个就是代表上下左右变宽的颜色

    borderTopColor,borderRightColor

    ,borderBottomColor,borderLeftColor

    borderRadius

    边框圆角大小,其他几个是上下左右边框的圆角.borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,

    borderBottomRightRadius

    borderStyle

    边框线的风格,这个和CSS样式一样的

    ,enum('solid', 'dotted', 'dashed')

    borderWidth

    边框宽度,另外四个是上下左右的边框宽度:borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth

    opacity

    设置透明度

    overflow

    设置内容超过容器显示还是隐藏

    elevation

    高度,设置Z轴,可以产生立体效果

     

     

    下面是几个特殊的属性,这边直接介绍所有平台通用以及只在Android平台有效果的属性

    .testID  (全平台)

         可以根据该testID在测试的时候定位该View

    :accessibilityComponentType(android平台)

         定义是否该UI组件和原生组件一致化处理

    .accessibilityLiveRegion  enum('none','polite','assertive') (android平台)

        该当View发生更新时候的,是否需要通过用户,不过该只对Android4.4以及以上的平台设备有效果

    .collapsable (android平台)

        布局合并优化使用

    .importantForAccessibility enum('auto','yes', 'no', 'no-hide-descendants') (android平台)

        设置视图响应事件等级

    .needsOffscreenAlphaCompositing (android平台)

         设置View是否需要渲染和半透明度效果处理的先后次序。

    .renderToHardwareTextureAndroid (android)

       设置是否需要GPU进行渲染

    最后实例的官方实例为:https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js

    ()最后总结

              今天我们主要介绍了基础控件View的使用方法以及相关属性风格,大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

           尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

           关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

         关注我的微博,可以获得更多精彩内容

          

     

    展开全文
  • ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互...
  • React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架,可以同时支持iOS和Android两大移动平台。那有人会问,除了可以开发移动跨平台应用,那能不能使用React Native...

    概述

    React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架,可以同时支持iOS和Android两大移动平台。那有人会问,除了可以开发移动跨平台应用,那能不能使用React Native开发桌面客户端应用呢?答案是肯定的。

    如果有使用React Native开发桌面应用的需求,那么可以参考下微软推出的
    React Native for Windows + macOS技术。React Native for Windows + macOS是微软在React Native 框架的基础上开发的一套使用React前端技术来开发桌面应用的技术,它们在GitHub上的地址分别为:react-native-windows
    在这里插入图片描述
    react-native-macos
    在这里插入图片描述
    目前,最新版本是0.61,而React Native的最新版本是0.62.2,以下是React Native for Windows + macOS的历史版本。
    在这里插入图片描述

    react-native-macos

    相较于早期的react-native-windows项目,react-native-macos 是最新才发布的,在前不久的微软365大会才正式为人所知晓。

    环境要求

    想要使用react-native-macos来开发Mac 桌面应用,那么需要具备如下环境:

    • 一台安装了macOS系统的,可以编译本地代码的苹果电脑。
    • 安装Xcode 11.3.1及以上版本。
    • 确保安装了Xcode的命令行工具,你可以打开Xcode的"Preferences…" ,然后再Locations面板中安装这一工具。
    • 安装 CocoaPods,如果没有安装,那么可以使用“sudo gem install cocoapods”命令进行安装。
    • 其他React Native需要的环境,如Node、Watchman等,可以使用如下的命令进行安装。
    brew install node
    brew install watchman
    

    基本使用

    react-native-macos和React Native的使用过程类似,首先,我们使用如下的命令创建一个React Native for macOS应用。

    npx react-native init <projectName> --version 0.61.5
    

    等待上面的命令执行成功后,使用cd命令进入项目,如下所示。

    cd <projectName>
    

    然后,安装 React Native for macOS所需的依赖包,如下所示。

    npx react-native-macos-init
    

    然后,更新你的CocoaPods版本,命令如下:

    cd macos && pod install && cd ..
    

    最后,使用react-native run-macos命令运行项目即可。

    npx react-native run-macos
    

    当然,你也可以使用Xcode打开React Native工程下的macos项目,然后使用Xcode运行。

    React Native for Microsoft Surface Duo

    在微软365大会上,微软还演示了如何使用Java和Kotlin,Xamarin和C#以及Unity游戏在Microsoft Surface Duo上构建双屏应用。 而今天我们要讲的是如何使用JavaScript和TypeScript来开发React Native应用。

    Microsoft Surface Duo是微软发布一款基于Android的折叠移动设备,如下图所示。
    在这里插入图片描述

    首先,您首先需要下载并安装Surface Duo模拟器。 如果您已经使用React Native开发Android应用程序,则应具备所有必要的先决条件,并准备构建双屏应用程序。接下来,你可以按照React Native入门说明,您将通过运行以下命令来启动新项目。

    npx react-native init AwesomeProject
    

    然后启动Surface Duo模拟器,并且使用以下命令运行React Native项目:

    cd AwesomeProject
    npx react-native run-android
    

    等待项目启动成功之后,就会在模拟器中看到跨越两个屏幕,如下图所示。
    在这里插入图片描述
    在这里插入图片描述
    React Native双屏SDK是开源的,因此您可以看到为Surface Duo带来双屏功能的代码。 SDK中有两个模块:DualScreenInfo和TwoPaneView。具体参考,微软跨平台开发React Native概述

    React Native DualScreenInfo

    DualScreenInfo是一个非视觉帮助程序,它提供有关设备的信息,以便您的代码和布局可以适应双屏显示。 它包含以下方法:

    • isDualScreenDevice –在访问其他双屏特定的API之前,请选中此复选框。
    • isSpanning –应用程序是在一个还是两个屏幕上。
    • windowRects –两个显示矩形的边界(不包括铰链区域)。
    • didUpdateSpanning –事件监听器,因此当应用程序跨度移动或移动到单个屏幕时,您的代码可以响应。

    这些API可用于在React Native应用程序中构建出色的自定义体验。 按照安装说明获取软件包,使用前请确保正确配置了Android项目。 包含的示例包含MasterDetail,CompanionPane和TwoPage选项-取消对App.tsx中的每个注释的注释,以进行尝试。

    在这里插入图片描述

    React Native TwoPaneView

    TwoPaneView控件为构建双屏应用程序提供了其他帮助, 要将其添加到您的应用中,请首先按照dualscreeninfo说明进行Kotlin和活动配置,然后使用npm install react-native-twopaneview命令来安装模块。

    您可以使用此处显示的标记创建动态布局,如下所示。

    <TwoPaneView panePriority={this.state.panePriority} panePriorityVerticalSpanning={this.state.panePriority} >
        {/* Pane A */}
        <MasterContent/>
        {/* Pane B */}
        <DetailContent/>
    </TwoPaneView>
    

    布局的panePriority和其他功能使您可以控制每个屏幕配置中显示的内容。 Windows TwoPaneView文档和API参考提供了有关控件工作方式的一些提示,这些模块可以在React Native双屏示例中看到。

    在这里插入图片描述

    参考文档:React Native apps for Microsoft Surface Duo

    展开全文
  • 前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信。一、react native中的webview组件1、为什么要用webview页面。 我这边用...

          前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信。

    一、react native中的webview组件

    1、为什么要用webview页面。

          我这边用webview是因为用rn来写页面,速度实在是感人。而且RN里面的样式没有css那么全面。如果要做弹出层等,还需要使用rn的组件。实在是麻烦。所以就选择用webview做h5页面。

    2、关于webview的详细介绍:

    参考博客:https://www.jianshu.com/p/9e6f1569227f

    二、webview在rn中的使用

    1、在页面顶部引入webview组件

    import{
      View,
      ScrollView,
      Image,
      Text,
      WebView,
    } from 'react-native';

    2、引入组件之后,在页面中使用webview引入h5的页面

     __detail_webview(){
        /*
        * scrollEnabled:是否允许滚动
        * javaScriptEnabled 是否允许插入JS代码到webview里面
        * injectedJavaScript  插入到webview的<head></head>标签中的JS代码
        * onMessage:获取webview传过来的数据
        * source:这个部分可以是webview页面的url,也可以是直接的html代码
        * */
        let it = this;
        let {params} = it.props.navigation.state;
        let webView_style = {height: it.state.webview_h,width: gScreen.width};
        return (
          <WebView
            style={webView_style}
            scrollEnabled={false} 
            javaScriptEnabled={true}  
            injectedJavaScript={'插入到h5页面中的js代码'}
            onMessage={event => {'接收h5页面传过来的消息'}}
            source={{uri: '你的可访问的h5链接'}}
          ></WebView>
        );
      }

          这部分使用的是部分webview的属性。具体的请看注释,都大致解释了一下是干嘛的。在source部分引入可访问的h5页面的链接之后,我们需要渲染视图。

    3、渲染视图

    //在页面中调用__detail_webview方法,渲染页面
      __render() {
        return this.__detail_webview();
      }
    

    4、显示h5页面

    这里写图片描述

          到这里,我们写好的h5页面就已经在rn中显示出来了。主要还是引链接的问题。如果需要往这个页面传参数,我们直接在webview的source中传递参数即可。

    三、webview与react native的通信

    1、实现react native和webview的通信,我们需要先了解h5解决跨域的全局函数。

    postMessage()方法
    onMessage()方法

    建议大家去百度查一下,先做个了解。这样就知道我们是要通过什么实现通信了。
    参考链接:https://www.cnblogs.com/dolphinX/p/3464056.html

    2、比如我们在webview页面中,也就是新增地址这里,我们加一个点击事件,然后需要返回给react native一个路由字符串,供我们跳转。

    这里写图片描述

    3、webview中的点击事件代码:

    <script type="text/javascript">
          function add_address() {
            var route = 'Smart';
            var type = 'set_route';
              var obj = {
                "type": type,
                "route": route,
              };
              console.log("obj");
              console.log(obj);
              window.postMessage(
                JSON.stringify(obj)
              );
          }
        </script>

          这里是点击之后,我们通过postMessage()方法,传递两个参数。一个是type值,是我们做判断时候用的。判断是哪种类型的消息。另一个是我们想传递的其他参数。这里记得参数传递前做一次:JSON.stringfy()方法,解析json字符串。

    4、react native中获取postMessage()传过来的数据

    //这个方法就是我们在最上面,给webview加的onMessage属性调用的方法
     msg_from_webview_h(event) {
        let it = this.p; // 视图指针
        //使用JSON.parse()获取传过来的数据
        let get_data = JSON.parse(event.nativeEvent.data);
       console.log('get_data:');
       console.log(get_data);
       //判断type值是不是我们想要的type值
        if(get_data.type === 'set_route'){
          let str ="获取到的route信息:"+  JSON.stringify(get_data);
          //这里是一个小弹窗组件,弹出我们postMessage()方法传过来的数据,看看是不是我们想要的数据。
          toastModule.run(str, 0);
          return false;
        }
      }

    5、点击“添加地址”,看看react native有没有和webview通信成功

    这里写图片描述

          如图所示,点击之后,我们弹出了我们想要的消息。接下来就是根据自己的业务逻辑来处理弹出来的数据了。通信成功。

    夜深了,越来越熬不住,老了老了。

    end

    展开全文
  • 使用ReactNative开发时,项目中有时候还需要使用h5,那么本文要解决的问题是h5与ReactNativ的互动。在h5中单击某个按钮,可以触发ReactNative的动作执行。我们通过react-native-webview-bridge来实现 2、 实现流程 ...
  • 前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信。一、react native中的webview组件1、为什么要用webview页面。 我这边用...
  • 最近做了两个React Native(以后简称RN)的项目,重新Review一下相关的项目代码,期望下次使用的时候可以有更好的结构,更好的规范和约束已帮助大家减少bug,提高开发效率; ​ 在做了一些原生Android开发,iOS开发和基于...
  • React Native概述什么是React NativeReact Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)...
  •  有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。 先看一下我集成完之后的项目目录: 首先安装React Native node组件  1、新建一个文件夹如目录中的RN,这个...
  • React Native 项目目录解析 上一节我们简单的新建了一个React Native的项目AwsoneProject,我们什么都没有操作,就直接在模拟器上运行起来了。这里我们详细的看看,React Native给我们生成的这几个文件到底是做什么...
  • react Native 开发过程中 遇到的问题 在启动项目时 遇到过React Native version mismatch错误 这里报错的意思是react native 与 javascript 版本不一致 这里可能出现报错的原因有两个,一个就如报错所言两种版本不...
  • 欢迎大家关注【跨平台开发那些事】公众号,定期推...基于最新版本React Native实现JsBundle预加载,界面秒开优化 一、开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目。在短短不到3个月的时间,gith...
  • 一开始准备用weex做app,鉴于坑太多,应该是用react native,接下来演示怎么配置环境,可以看react native中文官网,上面也有大概的配置教程。因为一开始想用weex,和react native一样也需要安卓环境,所以先把这块...
  • react-native-s-alipay React Native 支付宝模块,同时支持ios和android,react native 0.60.0+ autolink 安装 npm install react-native-s-alipay --save 或者 yarn add react-native-s-alipay 配置 如果你的...
  • React Native作为时下最热门的跨平台开发方案,在这两年的移动跨平台方案中可谓一枝独秀,在很多的移动产品中都可以看到它们的影子,相比国内的Weex,RN的迭代更加频繁,性能上也无限的接近原生应用。不过,RN从性能...
  •  由于工作原因,由Android原生开发转向React Native开发,ReactNative是从去年5月份开始至今,最近公司想要使用Android+H5开发,在这里,找了一篇文章,说一下Android 原生开发、H5、React-Native开发特点。...
  • 移动跨平台框架React Native经过4年的发展,其生态已经变得异常丰富,在使用React Native开发项目的过程中,为了提高开发效率,我们经常会借鉴一些使用使用率比较高的开源库,根据大众的需求,对这些使用较高的 ...
1 2 3 4 5 ... 20
收藏数 30,816
精华内容 12,326
关键字:

5 reactnative