• 当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮...

    当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的,一切都是那么简便,但如果出现如下几种情况,那么你需要认真阅读本文了:

    1. 8081端口被其他程序占用(比如杀毒软件),导致React Native无法正常启动8081的服务;
    2. 如果你想同时运行多个React Native项目;
    3. 如果你好奇React Native的默认8081是如何设置的,想修改它;

    修改React Native监听端口

    启动React Native服务默认会监听8081端口,那么如何修改这个默认的端口呢?接下来就跟着我一步一步的来修改React Native服务默认监听的端口吧!

    第一步:修改Server端口

    所谓Server端口,也就是我们通过npm start或者react-native run-xxx命令启动的React Native本地服务器的端口号,如图: 
    server_port

    临时修改Server端口

    查看最新的server.js的源码,不难发现一下一段代码:

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    从上述代码中可以看出,我们在启动react native服务的时候可以为它指定一个端口号:

    • 1

    永久修改Server端口

    要永久修改这个默认端口号,我们需要修改server.js文件,server.js所在位置,在:

    • 1

    找到这个文件,打开它,然后将默认的8081端口修改为你想要的端口号即可:

    server_port

    修改好之后,需要验证一下有么有生效,怎么验证呢,方法很简单,在项目根目录下运行npm start即可: 
    server_port
    从上图可以看出,这里我们已经将react-native的默认端口修改为了8082。

    第二步:修改iOS项目的端口号

    在修改了React Native 服务的端口号之后,我们要需改iOS项目的端口号让它从新端口获取jsbundle,否则的话会出现No bundle URL present错误。

    • 通过XCode打开React Native项目中的iOS项目;
    • 修改以下文件的端口号: 
      • RCTWebSocketExecutor.m
      • RCTBridgeDelegate.h
      • RCTBundleURLProvider.m
      • RCTInspectorDevServerHelper.mm
      • RCTPackagerConnectionBridgeConfig.m


    Show the Find navigator

    接下就可以通过react-native run-ios来运行iOS项目并从新的端口读取jsbundle了。

    第三步:修改Android项目的端口号

    在修改了React Native 服务的端口号之后,我们要需改Android项目的端口号让它从新端口获取jsbundle,否则的话会出现No bundle URL present错误。

    • 打开调试工具(Dev Settings),可以通过(command+M) 完成;
    • 点击 Debug server host & port for device,添加localhost:xxx其中xxx为新的端口地址; 
      localhost.png
    • 重新reload一下,就可以从新的端口加载jsbundle了。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    AndroidInfoHelpers.png

    如何同时运行多个react native项目

    因为端口绑定的缘故,默认情况下react native是不支持同时运行多个项目的。

    如果我们要同时运行多个react native项目的话,需要为同时运行的多个项目分配不同的端口号。这样以来,我们就可以让react native支持同时运行多个项目了。关于如何为不同项目分配端口号,查看上文 [修改React Native监听端口](#修改React Native监听端口) 的教程即可。

    如果大家对修改React Native端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。 
    另外也可以关注我的新浪微博@CrazyCodeBoy,或者关注我的Github来获取更多有关React Native开发的技术干货

    如果,大家在开发原生模块中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。 
    另外也可以关注我的新浪微博,或者关注我的Github来获取更多有关React Native开发的技术干货

    参考


    展开全文
  • 摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?...

    @王利华,vczero

    “存在即合理”。凡是存在的,都是合乎规律的。任何新事物的产生总要的它的道理;任何新事物的发展总是有着取代旧事物的能力。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是世界上最好的语言” ——工程学的范畴,没有最好,只有最适合

    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组件。

    (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 生态库

    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有些大;但是具备跨平台能力和热更新能力。
    最后硬广一下我的书:


    展开全文
  • 移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性...
  • 完全征服React Native

    2018-10-22 21:38:05
    React Native是Facebook于2015年推出的跨平台开发...本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合
  • 近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状、新版本的升级体验、还有新支持的 React...

    近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状、新版本的升级体验、还有新支持的 React Hook 等特性。

    本篇并不是源码解析和教程,更多是讨论和记录描述。笔者一直致力于 AndroidReact-NativeFlutter 等大前端开发,有时也会写写 ReactVue,本篇文章也是希望能够和大家交流,可以的话欢迎提出问题或者建议,最后同样希望文章能对你有所启发。

    皮一下,React-Native 项目发布4年多了,还没有 1.0 版本么(¬_¬)

    一、现状

    相信大家对于 React-Native “要凉” 的第一印象,应该是来自于 Aribnb 的 “为什么 Airbnb 放弃了 React Native” ,如文中描述的 React-Native 确实会遇到一些性能瓶颈,但这取决于和谁对比,个人认为 代码是服务于业务的,抛开场景比性能的做法其实并不严谨。 关键还是在于你如何使用,并且官方与社区是否还活跃和优化。

    先说我对跨平台的理解: 一套逻辑可以在多个平台运行,更多是避免各平台业务逻辑不统一,而对工作量的减轻是不明显!不明显!不明显的! 同时一个企业项目大了之后,一般也不会局限于一个框架之内。

    事实上 Facebook 也并没有放弃 React-Native ,在经历 《Facebook 正在重构 React Native,将重写大量底层》 的官宣之后,“四舍五入”将近一年后的今天,底层重构虽然还没有正式发布,但是近期的新版本 0.59.x 也给出了不错的答卷。

    新版本中主要有以下几点:

    • 1、减轻了 React-Native 自身框架,将 webView 、viewPager、netinfo、async-storage 等内置包拆分,通过社区独立维护,并逐步模糊 ReactReact-Native 的界限。
    • 2、更新 JavaScriptCore 、upgrade 和 CLI 工具。
    • 3、支持 React Hooks
    • 4、修复了 FlatList 等列表控件中的诸多问题。

    未来版本的重构主要目标有:

    • 1、减轻 JSBridge 的依赖。
    • 2、通过 Fabric UI架构,将 Shadow 层、 UIManagerNativeModule 从 Java 移到 C++ 中,从而支持 双向的同步和异步渲染与调用

    可以看出 0.59 版本中的重构和拆分,都是在为了下一步的重构做准备,更多具体的下一代重构内容分析,可以在京东的 《庖丁解牛!深入剖析 React Native 下一代架构重构》 中查阅,这里就不多赘述了。

    同样在携程的项目中: 《携程开源RN开发框架CRN》 文章也表示在第一时间更新到了 0.59.x 版本,现在还会觉得 React-Native “要凉” 了嘛?

    题外话

    如今的编程界里存在各种“党争”,比如前端中 VueReactAngular ,跨平台的 CordovaWeexReact-NativeFlutter 等,而我在考虑选择框架时,一般会从以下几点优先级先后排序:

    • 1、框架的活跃度。
    • 2、你的业务需求复杂度。
    • 3、团队配置和团队成员技术风格。
    • 4、个人对框架的舒适度。

    二、React-Native 0.59.x

    在选择升级版本之前,我们需要了解 React-Native 中版本是有 0.A.B 的大 A 小 B 版本号设定,而在 React-Native 使用过程中我的一个感受就是:

    在做 React-Native 的版本选择或升级时,最好不要选用 0.A.0 版本,比如 0.59.0;我一般会选择大版本之后的小版本迭代,如 0.59.4 版本去升级更新,这样的版本相对更稳定,可以少躺一些问题。

    然后 React-Native 的版本升级一直是个头大的问题,我一般会先在自己的开源项目中躺坑,本次在我的开源项目 GSYGithubAPP 中,是从 0.57.8 直接升级到 0.59.4 版本,结果如预期一般并不顺利,而一般 React-Native 的版本升级,带来的问题主要有三类:

    1、官方 API 的调整

    一般这类问题都比较好解决,官方的更新文档也有详细说明,这次升级中主要是将原本 React-Native 自带的 webViewnetinfoasync-storage 等插件替换到 react-native-community 下提供,并替换一些弃用 API 。

    2、第三方库不兼容 :

    这也是 React-Native 中比较头疼的问题,因为第三方包的维护参差不齐,基本上如果作者不维护或维护不及时,那就只能自己苦笑动手了,就像本次 GSYGithubAPP 在升级过程中就遇到有:

    • 升级后遇到 realm 库在 Xcode 上的编译错误错误,详细可见 GSYGithubAPP#66 ,虽然问题不大,可自行通过简单本地改库解决,这也是目前项目的升级还未合并到 master 的原因之一。

    • react-native-router-fluxreact-navigation 的升级版本需要相互对应,同时需要增加 react-native-gesture-handler 依赖,并且在 index.js 入口处提前导入来解决一些问题。

    • 各类第三方插件的 Android targetSdksupportSdk 等版本和依赖方式问题。

    3、node_module “黑洞”

    这类问题属于看人品,比如 GSYGithubAPP 项目是从 0.57 升级到 0.59 的,而 BackAndroid0.58 已经被完全弃用,其中项目刚好存在一个 modal 插件使用了 BackAndroid ,虽然作者也更新了插件做兼容,但是····

    在更新了插件之后,重新运行后却依旧报错?WTF,而明插件源码已经没有 BackAndroid 的痕迹,那错误哪里来的?

    通过 Chrome 的 Debug 查看当前 bundle 源码,最后发现居然真的有BackAndroid 的存在,当时就判断妥妥的缓存问题。

    在执行了无数遍的卸载 APP,关闭CLI,删除 node_module 重装后,最终还是通过删除缓存 rm -rf ~/.rncacherm -rf $TMPDIR/* ,再重新安装node_module 运行才解决问题。

    • 总结

    其实这也是为什么我说 React-Native 等跨平台开发,其实并没有降低工作量的原因。跨平台解决的是逻辑统一维护,而开发中过程中,很多时候会遇到兼容开发的问题,并且平台之间的适配同样消耗时间。

    我相信每个 React-Native 开发人员都十分讨厌满屏幕的红色,所以不知哪一版开始, React-Native 把错误增加了红黑相间的效果(¬_¬)。

    三、React Hooks

    React Hooks 其实也是我升级到 0.59 的目的之一,因为它确实是一个很有意思的设定。

    事实上我并非严格意义上的前端人员,大部分时候我对 CSSES 的了解也不深入,但在 JS 的使用过程中有几个让我印象深刻的:

    • ReduxRedux 的状态管理设计,且由它衍生出的一系列后续和第三方插件,我个人觉得这是 React 当初能快速的风靡的助力之一。

    • HOCES7 Decorators :事实上这应该也包含在 Redux 里, 但是 HOC + Decorators 快速实现类似切面编程的效果,这无疑让 Java 开发的我感到亲切。

    最后就是本文主角 React Hooks 了,React Hooks 也算是比较新的概念,关于 React Hooks 的我推荐这篇文章: 《【React深入】从Mixin到HOC再到Hook》 ,文中很好的描述了 React 开发风格的发展和对比。

    而对于 React Hooks 能在这么早就引入到 React-Native 中,给我的感觉就是 Facebook 团队在致力于模糊 React 开发者在 Web 和 App 之间的边界,同时这也是为了丰富 React 开发者的生态吧。

    而对于 React Hooks ,在我的理解上而言,函数式编程可能更贴近“未来”的形态(虽然我并不特别确定),而 React Hooks 确实有着明显的优势:

    • 可以更好的减少我们的代码量。
    • 同时降低代码在生命周期执行过程中造成的阻塞。
    • 自定义 Hooks 可以在一定程度上解耦,增加复用,减少嵌套。
    • 函数式编程的风格让函数功能独立,代码简洁更好阅读。

    回归到具体使用, React Hooks 其中最常用默认接口有 :

    • useState 可以让你在函数中快速添加状态
    • useEffect 让你快速添加生命周期处理
    • useImperativeHandle 快速对外暴露接口

    这些内置 Hook 可以在一定程度上节省你的代码量,并且提供清晰的状态管理逻辑,同时利用官方的 useReducer ,如下方代码,更可以快速写出一个伪 Redux

    import React, {Component, useReducer, useRef, useImperativeHandle, forwardRef} from 'react';
    import {Text, View, TouchableOpacity,} from 'react-native';
    
    const initialState = {count: 0};
    
    function reducer(state, action) {
        switch (action.type) {
            case 'reset':
                return initialState;
            case 'increment':
                return {count: state.count + 1};
            case 'decrement':
                return {count: state.count - 1};
            default:
                return state;
        }
    }
    
    export function DemoCounter({initialCount}) {
        const [state, dispatch] = useReducer(reducer, {count: initialCount});
        return (
            <View>
                <Text>Count: {state.count}</Text>
                <TouchableOpacity onPress={() => dispatch({type: 'reset'})}>
                    <Text>Reset</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => dispatch({type: 'increment'})}>
                    <Text>+</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => dispatch({type: 'decrement'})}>
                    <Text>-</Text>
                </TouchableOpacity>
            </View>
        )
    }
    
    

    对于 React Hooks ,结合查阅源码和文章简单理解,就在渲染之前利用系列的钩子,而 Hooks 内部利用了数组 ,实现状态数据的顺序更新。

    所以官方也表示了,Hooks 不能在循环或者条件判断中使用,这属于一种约定,因为 Hooks 内的数组每次都是顺序的调用的,如果在条件判断中打乱了顺序,将导致游标无法匹配到正确的数据,所以约定了不要在 if 或者 for 中使用 useState 等行为。

    关于 React Hooks 相关更详细的干货,推荐查阅:

    最后说说编码风格:

    无论是 HOCReact HooksRedux 等,其实我觉得都不存在所谓最优解,具体选择使用还是得看业务场景,过度为了设计而设计,杀鸡用牛刀的后果就是很不顺手,而且还容易误伤

    如果是个人开发,show 代码亮逼格这无可厚非,但如果是实际团队开发,最好还是需要考虑团队的合作选型,不然你写的代码只有你能维护,估计最后哭的还是自己。

    好了,本篇到此结束!(///▽///)

    跨平台完整项目与文章:

    完整文章目录在项目首页 ReadMe

    其他文章

    《移动端跨平台开发的深度解析》

    在这里插入图片描述

    展开全文
  • ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互...
  • ReactNative环境搭建完毕后使用真机调试时 react-native run-android后,build成功,但是最后提示如下信息 Running F:\android-studio-ide-182.5105271-windows\android-sdk-windows/platform-tools/adb -s e51...

    ReactNative环境搭建完毕后使用真机调试时

    react-native run-android后,build成功,但是最后提示如下信息


    Running F:\android-studio-ide-182.5105271-windows\android-sdk-windows/platform-tools/adb -s e51a670 reverse tcp:8081 tcp:8081
    error: cannot bind to socket
    Could not run adb reverse: Command failed: F:\android-studio-ide-182.5105271-windows\android-sdk-windows/platform-tools/adb -s e51a670 reverse tcp:8081 tcp:8081
    Starting the app on e51a670 (F:\android-studio-ide-182.5105271-windows\android-sdk-windows/platform-tools/adb -s e51a670 shell am start -n com.firstrntest/com.firstrntest.MainActivity)...
    Starting: Intent { cmp=com.firstrntest/.MainActivity }


    查看端口状态,8081被node占用,运行起来的服务也要使用8081端口

    解决方法是将

    react-native start命令改为react-native start --port 端口号

    react-native run-android命令改为react-native run-android --port 端口号

    当然可以直接运行react-native run-android --port 端口号  这个命令node会自动启动。


    之后使用adb命令,映射端口号

    adb reverse tcp:9999 tcp:8081

    问题解决!
     

    展开全文
  • 当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮...

    期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!!

    当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的,一切都是那么简便,但如果出现如下几种情况,那么你需要认真阅读本文了:

    1. 8081端口被其他程序占用(比如杀毒软件),导致React Native无法正常启动8081的服务;
    2. 如果你想同时运行多个React Native项目;
    3. 如果你好奇React Native的默认8081是如何设置的,想修改它;

    修改React Native监听端口

    启动React Native服务默认会监听8081端口,那么如何修改这个默认的端口呢?接下来就跟着我一步一步的来修改React Native服务默认监听的端口吧!

    第一步:修改Server端口

    所谓Server端口,也就是我们通过npm start或者react-native run-xxx命令启动的React Native本地服务器的端口号,如图:
    server_port

    临时修改Server端口

    查看最新的server.js的源码,不难发现一下一段代码:

    ...
    command: '--port [number]',
    default: 8081,
    parse: (val: string) => Number(val),
    ...
       
    

    从上述代码中可以看出,我们在启动react native服务的时候可以为它指定一个端口号:

    react-native start --port=8082
    

    提示:上述代码,是2017年8月1号提交的一个pull request,所以说在2017年8月1之前的React Native版本是没有这个功能的。

    永久修改Server端口

    要永久修改这个默认端口号,我们需要修改server.js文件,server.js所在位置,在:

    你的项目名称/node_modules/react-native/local-cli/server/server.js
    

    找到这个文件,打开它,然后将默认的8081端口修改为你想要的端口号即可:

    server_port

    修改好之后,需要验证一下有么有生效,怎么验证呢,方法很简单,在项目根目录下运行npm start即可:
    server_port
    从上图可以看出,这里我们已经将react-native的默认端口修改为了8082。

    第二步:修改iOS项目的端口号

    在修改了React Native 服务的端口号之后,我们要需改iOS项目的端口号让它从新端口获取jsbundle,否则的话会出现No bundle URL present错误。

    提示:如果你的React Native项目没有iOS模块可以忽略此步骤;

    • 通过XCode打开React Native项目中的iOS项目;
    • 修改以下文件的端口号:

    为了方便查找这些文件并定位到端口号,你可以借助XCode的Show the Find navigator功能来查找文本8081
    Show the Find navigator

    接下就可以通过react-native run-ios来运行iOS项目并从新的端口读取jsbundle了。

    第三步:修改Android项目的端口号

    在修改了React Native 服务的端口号之后,我们要需改Android项目的端口号让它从新端口获取jsbundle,否则的话会出现No bundle URL present错误。

    提示:如果你的React Native项目没有Android模块可以忽略此步骤;

    • 打开调试工具(Dev Settings),可以通过(command+M) 完成;
    • 点击 Debug server host & port for device,添加localhost:xxx其中xxx为新的端口地址;
      localhost.png
    • 重新reload一下,就可以从新的端口加载jsbundle了。

    另外,如果你的项目是源码级依赖React Native的话,也可以通过修改AndroidInfoHelpers.java文件来完成对Android项目的端口的修改。

    
    public class AndroidInfoHelpers {
      public static final String EMULATOR_LOCALHOST = "10.0.2.2";
      public static final String GENYMOTION_LOCALHOST = "10.0.3.2";
      public static final String DEVICE_LOCALHOST = "localhost";
    
      private static final int DEBUG_SERVER_HOST_PORT = 8081;
      private static final int INSPECTOR_PROXY_PORT = 8081;
      ...
    

    AndroidInfoHelpers.png

    如何同时运行多个react native项目

    因为端口绑定的缘故,默认情况下react native是不支持同时运行多个项目的。

    如果我们要同时运行多个react native项目的话,**需要为同时运行的多个项目分配不同的端口号。**这样以来,我们就可以让react native支持同时运行多个项目了。关于如何为不同项目分配端口号,查看上文 [修改React Native监听端口](#修改React Native监听端口) 的教程即可。

    如果大家对修改React Native端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。
    另外也可以关注我的新浪微博@CrazyCodeBoy,或者关注我的Github来获取更多有关React Native开发的技术干货

    告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。

    如果,大家在开发原生模块中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。
    另外也可以关注我的新浪微博,或者关注我的Github来获取更多有关React Native开发的技术干货

    推荐学习:视频教程《React Native开发跨平台GitHub App》

    参考

    展开全文
  • 一、ReactReact.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。 在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发...
  • RN 项目 安装 react-native-webview 跨平台webview库 # 安装 react-native-webview yarn add yarn add react-native-webview // package.json { "name": "RNMyBaby", "version": "0.0.1", "private": true, ...
  • ReactNative官网:http://facebook.github.io/react-native/ ReactNative中文网:http://reactnative.cn/ 江清清RN技术专栏:http://www.lcode.org/react-native/(环境搭建,基础组件和常用API学习,RN开源项目,...
  • 最近配置React Native在window环境下写Android程序,遇到不少坑,在此记录一下8081端口被占用的坑。检查8081端口在这里我们先用cmd命令提示符检查一下8081端口的占用情况,在命令行输入以下命令 netstat -aon|...
  • react-native版本: react-devtools版本:3.2.1谷歌版本: 这几个版本放在一起就蛋疼了,react-native 始终无法在react-devtools或chrome上进行调试1、在chrome上调试,需要安装react-developer-tools的插件,想...
  • 插件安装 官方链接:https://github.com/wonday/react-native-pdf #安装 npm install rn-fetch-blob --save npm install react-native-pdf --save #链接依赖 ...react-native link react-native-p...
  • 在0.44版本之前,开发者可以直接使用官方提供的Navigator组件来实现页面的跳转,不过从0.44版本开始,Navigator被官方从react native的核心组件库中剥离出来,放到react-native-deprecated-custom-components的模块...
  • 由于chrome浏览器扩展的工具只能console和sources...于是我就去官方文档下了devtools,https://reactnative.cn/docs/debugging.html#react-developer-tools 但是卡在下图 临时想到的法子: 然后命令行react...
  • ReactNative浅谈

    2018-07-04 17:41:21
    React Native是什么?Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React NativeReact Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生...
  • 最近在学习和开发react native的过程中,看了社区很多大牛的的文章,自己总结的一些东西。 1.react Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部...
  • 对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 ...新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!
  • yarn add react-navigation 2、使用 (1)创建跳转路由 import React from 'react'; //导入 import {createStackNavigator} from 'react-navigation'; import Page1Screen from '../screen/Page1'; import Page2...
1 2 3 4 5 ... 20
收藏数 58,174
精华内容 23,269