原生react-native_react-native-navigation 原生 跳转 - CSDN
  • 原生开发是系统自带的app开发方式,也是大部分人最熟悉app开发的技术,如android、ios、wp。...react-native是用react 进行原生app开发的框架,让广大开发者使用js和react开发应用,提倡组件化开发

    原生开发、纯网页开发(H5开发)/混合开发(H5+原生)、React-Native开发

    1. 原生开发是系统自带的app开发方式,也是大部分人最熟悉app开发的技术,如android、ios、wp。
    2. H5开发是Html5开发的app,本质上运行在手机浏览器中的页面,一般使用app做一个壳套用浏览器运行H5的页面,由于H5的特性也有很多app使用半原生半H5的hybird app 开发模式。
    3. 介绍react-native之前,需要先提下react,react 是facebook在2013年开源的网站ui开发的js库,react-native是用react 进行原生app开发的框架,让广大开发者使用js和react开发应用,提倡组件化开发。react-native提供一个个封装好的组件让开发者使用,也可以相关嵌套形成新的组件。使用react-native可以维护多种平台(Web,Android和IOS)的同一份逻辑核心代码来创建原生app。从代码上看结构类似,细节有差别,facebook强调的是“learn once,write everywhere”,应用前端使用js和React来开发不同平台的ui,下层核心模块编写复用业务逻辑代码,提高应用的开发效率。react-native的原理。react-native的优点和H5类似,跨平台、低成本开发、开发速度快、动态发布、一套类似代码维护三个平台。

    一、React-Native

    背景

    作为前端小白,我以前对前端的理解是这样的:

    • 用 HTML 创建 DOM,构建整个网页的布局、结构
    • 用 CSS 控制 DOM 的样式,比如字体、字号、颜色、居中等
    • 用 JavaScript 接受用户事件,动态的操控 DOM

    在这三者的配合下,几乎所有页面上的功能都能实现。但也有比较不爽地方,比如我想动态修改一个按钮的文字,我需要这样写:

    <button type="button" id="button" οnclick="onClick()">old button</button>

    然后在 JavaScript 中操作 DOM:

    <script>
    function onClick() {
      document.getElementById('button').innerHTML='new button';
    }
    </script>

    可以看到,在 HTML 和 JavaScript 代码中,id 和 onclick 事件触发的函数必须完全对应,否则就无法正确的响应事件。如果想知道一个 HTML 标签会如何被响应,我们还得跑去 JavaScript 代码中查找,这种原始的配置方式让我觉得非常不爽。

    React

    随着 FaceBook 推出了 React 框架,这个问题得到了大幅度改善。我们可以把一组相关的 HTML 标签,也就是 app 内的 UI 控件,封装进一个组件(Component)中,我从阮一峰的 React 教程中摘录了一段代码:

    var MyComponent = React.createClass({
      handleClick: function() {
        this.refs.myTextInput.focus();
      },
      render: function() {
        return (
          <div>
            <input type="text" ref="myTextInput" />
            <input type="button" value="Focus the text input" onClick={this.handleClick} />
          </div>
        );
      }
    });

    如果你想问:“为什么 JavaScript 代码里面出现了 HTML 的语法”,那么恭喜你已经初步体会到 React 的奥妙了。这种语法被称为 JSX,它是一种 JavaScript 语法拓展。JSX 允许我们写 HTML 标签或 React 标签,它们终将被转换成原生的 JavaScript 并创建 DOM。

    在 React 框架中,除了可以用 JavaScript 写 HTML 以外,我们甚至可以写 CSS,这在后面的例子中可以看到。

    理解 React

    前端界总是喜欢创造新的概念,仿佛谁说的名词更晦涩,谁的水平就越高。如果你和当时的我一样,听到 React 这个概念一脸懵逼的话,只要记住以下定义即可:

    React 是一套可以用简洁的语法高效绘制 DOM 的框架

    上文已经解释过了何谓“简洁的语法”,因为我们可以暂时放下 HTML 和 CSS,只关心如何用 JavaScript 构造页面。

    所谓的“高效”,是因为 React 独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象,它与 DOM 是一一对应的关系,也就是说只要有 Virtual DOM,我们就能渲染出 DOM。

    当界面发生变化时,得益于高效的 DOM Diff 算法,我们能够知道 Virtual DOM 的变化,从而高效的改动 DOM,避免了重新绘制 DOM。

    当然,React 并不是前端开发的全部。从之前的描述也能看出,它专注于 UI 部分,对应到 MVC 结构中就是 View 层。要想实现完整的 MVC 架构,还需要 Model 和 Controller 的结构。在前端开发时,我们可以采用 Flux 和 Redux 架构,它们并非框架(Library),而是和 MVC 一样都是一种架构设计(Architecture)。

    如果不从事前端开发,就不用深入的掌握 Flux 和 Redux 架构,但理解这一套体系结构对于后面理解 React Native 非常重要。

    React Native的出现

    分别介绍完了移动端和前端的背景知识后,本文的主角——React Native 终于要登场了。

    融合

    前面我们介绍了移动端通过 JSON 文件传递信息的不足之处:只能传递配置信息,无法表达逻辑。从本质上讲,这是因为 JSON 毕竟只是纯文本,它缺乏像编程语言那样的运行能力。

    而 React 在前端取得突破性成功以后,JavaScript 布道者们开始试图一统三端。他们利用了移动平台能够运行 JavaScript 代码的能力,并且发挥了 JavaScript 不仅仅可以传递配置信息,还可以表达逻辑信息的优点。

    当痛点遇上特点,两者一拍即合,于是乎:

    一个基于 JavaScript,具备动态配置能力,面向前端开发者的移动端开发框架,React Native,诞生了!

    看到了么,这是一个面向前端开发者的框架。它的宗旨是让前端开发者像用 React 写网页那样,用 React Native 写移动端应用。这就是为什么 React Native 自称:

    Learn once,Write anywhere!

    而非很多跨平台语言,项目所说的:

    Write once, Run anywhere!

    React Native 希望前端开发者学习完 React 后,能够用同样的语法、工具等,分别开发安卓和 iOS 平台的应用并且不用一行原生代码。

    如果用一个词概括 React Native,那就是:Native 版本的 React。

    原理概述

    React Native 不是黑科技,我们写的代码总是以一种非常合理,可以解释的方式的运行着,只是绝大多数人没有理解而已。接下来我以 iOS 平台为例,简单的解释一下 React Native 的原理。

    首先要明白的一点是,即使使用了 React Native,我们依然需要 UIKit 等框架,调用的是 Objective-C 代码。总之,JavaScript 只是辅助,它只是提供了配置信息和逻辑的处理结果。React Native 与 Hybrid 完全没有关系,它只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。

    其次,React Native 能够运行起来,全靠 Objective-C 和 JavaScript 的交互。对于没有接触过 JavaScript 的人来说,非常有必要理解 JavaScript 代码如何被执行。

    我们知道 C 系列的语言,经过编译,链接等操作后,会得到一个二进制格式的可执行文,所谓的运行程序,其实是运行这个二进制程序。

    而 JavaScript 是一种脚本语言,它不会经过编译、链接等操作,而是在运行时才动态的进行词法、语法分析,生成抽象语法树(AST)和字节码,然后由解释器负责执行或者使用 JIT 将字节码转化为机器码再执行。整个流程由 JavaScript 引擎负责完成。

    苹果提供了一个叫做 JavaScript Core 的框架,这是一个 JavaScript 引擎。通过下面这段代码可以简单的感受一下 Objective-C 如何调用 JavaScript 代码:

    JSContext *context = [[JSContext alloc] init];
    JSValue *jsVal = [context evaluateScript:@"21+7"];
    int iVal = [jsVal toInt32];

    这里的 JSContext 指的是 JavaScript 代码的运行环境,通过 evaluateScript 即可执行 JavaScript 代码并获取返回结果。

    JavaScript 是一种单线程的语言,它不具备自运行的能力,因此总是被动调用。很多介绍 React Native 的文章都会提到 “JavaScript 线程” 的概念,实际上,它表示的是 Objective-C 创建了一个单独的线程,这个线程只用于执行 JavaScript 代码,而且 JavaScript 代码只会在这个线程中执行。

    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. Native不用WebView,彻底摆脱了WebView让人不爽的交互和性能问题;
    3. 跨平台特性
    4. 开发人员单一技术栈
    5. 上手快,入门容易
    6. 社区繁荣

    二、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有些大;但是具备跨平台能力和热更新能力。      


    六、总结

    最后我们总结一下,目前争论不休的原生、H5、react-native问题,在早先前争论CS,BS架构的软件系统是一样一样的。原先BS,CS对用户而言的区别是需不需要安装客户端。BS是通过浏览器来访问,用PC,平板,Win,Mac都能访问,用户不需要下载额外的客户端,同时运维和升级提供很大的便利。CS则需要下载客户端软件,安装,然后登录使用,升级的话,要么升级链接库,要么重新安装升级包,比较不方便,优势是很多算法在本地运行,对服务器要求不高。

    CS、BS之争是在PC端,那么现在原生和H5之争是在移动端。

    那么评判一个APP用什么技术来开发呢?经过总结,可以有如下判断依据:

    1. 如果APP中出现大段文字(如新闻、攻略等),且格式比较丰富(如加粗,字体多样),那么用H5会比较方便。原因是原生开发解析json对字符串格式处理不算很好。
    2. 如果讲究APP反应速度(含页面切换流畅性),则选用原生开发,因为H5其本质是网页,换页时,基本要加载整个页面,就像是浏览器打开一个新页面一样,显得较慢,而原生系统则只加载变化部分。
    3. 如果APP对有无网络、网络优劣敏感(譬如有离线操作,在线操作),那么,基本选用原生开发,虽然H5可以做到,但是很复杂。
    4. 如果APP需要频繁调用硬件(摄像头、麦克风、未来的湿度检测仪等等)那么,基本选用原生开发,这样支持硬件更多,更容易扩展,且调用速度更快,H5就望尘莫及了。
    5. 如果APP用户常见页面频换,如(淘宝首页各种不同活动),那么用H5,维护起来更容易。
    6. 如果预算有限(H5开发一套可跨平台覆盖安卓、ios,黑莓、塞班),不是很讲究用户体验,不在乎加载速度,那非H5不可。
    在实际开发过程中,可以在原生与网页的基础上进行混合,对于固定格式、页面速度要求高,的模块(如PDB的即时通讯、宝典、我的项目)采用原生开发,对于新闻、大段文字、资讯类的(如信息广场、发表、问吧等)用H5页面来加载,将其嵌入到原生框架中那么,可以达到比较良好的体验。


    参考:

    React Native 从入门到原理

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

    关于APP,原生和H5开发技术的争论

    展开全文
  • 如有疏漏错误,还望指正。...我们对其中的native的概念是很清晰的,它指的就是原生app,也就是用原生开发方式开发出来的应用。那么react又是什么呢?他们之间的连字符又有什么特殊的意义么?下面我们来一

    如有疏漏错误,还望指正。转载不忘加上>>原链接<<哦~

    react-native是什么? react-native原理
    这里写图片描述
    从字面意思上来看,react-native由单词react和单词native组合而成,中间一个连字符连接。

    我们对其中的native的概念是很清晰的,它指的就是原生app,也就是用原生开发方式开发出来的应用。

    那么react又是什么呢?他们之间的连字符又有什么特殊的意义呢?下面我们来一一解答。

    首先我们来说说react。react是什么?

    官网上定义React是一个用于构建用户界面的js库。 React是声明式的,高效率的,并兼具灵活性(React is a declarative, efficient, and flexible JavaScript library for building user interfaces.)。

    我们来理解一下,用于构建用户界面的js库有很多啊,比如说angular,vue,jquery,ext等等,都可以被称为用户构建用户界面的js库。

    那么react和它们比又有什么不同呢?定义里说react是声明式的,高效率的,并兼具灵活性,这就是react的不同之处了,也可以称为react的几个特性吧。

    接下来我们就来分别介绍一下react的这几个特性。

    1.声明式声明式是由JSX语法来表现的。那么jsx语法又是啥?JSX是使XML可以嵌入JavaScript的语法。用以更加直观的描述UI。 JSX是JavaScript对象,可理解为createElement的语法糖。

    我们来对比一下,首先是原生的js语法:

    React.createElement(MyButton,{
        color:'blue',
        shadowSize:2
    },'Click Me');

    再来看一下jsx语法:

    <MyButton color="blue" shadowSize={2}>Click Me</MyButton>

    大家一看,这不就是一个语义化的标签么,这样写的确比上面写起来简单,看起来也更清晰,但这就是JSX了么?当然不是,JSX语法的重点在于它是与js代码混写的,配合es6就像下面这样:

    class ShoppingList extends React.Component {
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    }

    现在是不是感觉有点cool了?JSX语法使用语义化的标签来简化代码的编写,提升了代码可维护性的同时也降低了学习成本

    现在主流的IDE和文本编辑器都可以通过安装插件来支持JSX语法。

    所以这个声明式指的是什么呢?指的就是上面代码中用大括号括起来的部分{this.props.name}这里类似于angular中的数据绑定。声明了UI中的表现与js中数据的关系。

    2.高效率高效率是由虚拟DOM来实现的

    虚拟DOM技术指的是使用javascript Object模拟DOM树,计算变更,减少重绘,提升效率的一种技术实现。

    这里有一篇文章,写的非常不错,我就直接给大家引用过来,大家自己看吧。
    >>虚拟DOM技术分析<<

    3.灵活性:这个灵活性范围就广了,有安装的灵活性,编写代码的灵活性等。我侧重来说一个,就是components,组件化。

    react-native通过Components进行组件化。它把UI分割成独立的、可重用的部件 。组件化这个概念大家也都不是第一次听说了吧,如果比较陌生的同学,可以自己搜搜哈。

    react有它自己的组件化方式,就是所有模块都继承自React.Components,这比angular的modules更轻量级,结构也更简单,条条框框也减少了很多,是所谓真正的感受到了灵活性呢。

    代码示例就像上面讲JSX语法的时候引用的那段,大家体会一下。

    好的,我们了解完了react的三个特性,也对react有了初步的理解。那么回到我们最开始的问题:react-native是什么啊?

    字面上来说,我们已经了解了react,了解了native的含义,那么react和native又是如何联系起来的呢

    首先,React通过虚拟DOM实现了对UI层的解耦(无论是android还是ios)。

    然后,将浏览器的DOM树替换为Native的UI模块,使React在移动端进行渲染。

    最后,采用Native的核心API完成react与native的通信。
    这里写图片描述

    由于采用native原生UI作为展现层,所以react-native具有可以媲美原生应用的优秀用户体验与性能优势。

    我们对react-native的一些字面上的概念都有了一定的了解。我把以上内容简单的概括为:react-native是基于react技术编写native应用的一门技术,它继承了react简明、高效、灵活的特点,又兼具native优秀的用户体验。

    react-native技术采用js编码,编写的应用具有跨平台、可热更新的优势。这就是我眼中的react-native。

    展开全文
  • 今天早八点还架着react-native这台炫酷*炸天的R跑驰骋在我们宠趴app测试版上,突然一阵妖风,差点闪瞎我的血轮眼,一片红色报错,对应的命令端出现错误提示如下图:百思不得其解,这个插件报错了 react-native-image...

    今天早八点还架着react-native这台炫酷*炸天的R跑驰骋在我们宠趴app测试版上,突然一阵妖风,差点闪瞎我的血轮眼,一片红色报错,对应的命令端出现错误提示如下图:


    百思不得其解,这个插件报错了 react-native-image-picker(这是一款在react-native开发中很常用的插件之一,主要功能是实现访问本地图片、相机、上传图片、视频的功能,具体到这里瞅瞅github.com/react-nativ…),一个有着4000多star的插件突然报错,果然在两个小时后,github上就聚集了一大帮大佬,大牛逼货开始讨论了,现场直播

    解决方案:在android文件夹下的 build.gradle 中添加如下代码(转自 github.com/akolpakov

    subprojects {
        if (project.name.contains('react-native-image-picker')) {
            buildscript {
                repositories {
                    jcenter()
                    maven { url "https://dl.bintray.com/android/android-tools/"  }
                }
            }
        }
    }
    复制代码


    展开全文
  • react-native 第三方库

    2020-06-21 15:01:25
    React-Native-Elements 一组开发RN的UI工具包(强烈推荐) ???????????????????? react-native-calendars ???????????????? 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用Style来配置 ???????? ...

    react-native 第三方库

    React-Native-Elements 一组开发RN的UI工具包(强烈推荐) 🔥🔥🔥🔥🔥

    react-native-calendars 🔥🔥🔥🔥 优秀的日历控件

    apsl-react-native-button 定义了一个Button支持用Style来配置 🔥🔥

    react-native-action-button 支持多种点击事件的Button控件 🔥🔥

    react-native-button 另一个Button组件 🔥🔥

    ex-navigator 封装Navigator,以Route为中心的Navigator 🔥🔥

    gl-react-native React Native中使用OPENGL来实现复杂的图片和components渲染 🔥🔥🔥

    react-native-activity-view iOS上的分享和action sheets组件 🔥🔥

    react-native-app-intro 引导页 🔥🔥

    react-native-blur 添加模糊或者毛玻璃效果 🔥🔥🔥

    react-native-calendar 日历 🔥

    react-native-chart 绘图(折线图,柱状图,扇形图) 🔥🔥🔥

    react-native-circular-progress 圆形的显示进度的视图 🔥

    react-native-collapsible 可折叠的component 🔥

    React Native Drawer 抽屉效果,可 用来实现侧拉菜单 🔥🔥🔥

    react-native-dropdown下拉菜单 🔥

    ReactNativeEffectsView 封装了iOS 8上的UIVisualEffectViews,在React Native中实现毛玻璃效果 🔥

    react-native-gesture-password 手势解锁,支持iOS和Android 🔥

    react-native-gifted-form 在React Native中方便的使用表格 🔥🔥

    react-native-gifted-listview 下拉刷新和上拉加载的ListView 🔥🔥

    react-native-gifted-messenger 方便的实现聊天UI 🔥🔥🔥🔥

    react-native-grid-view 网格视图,类似iOS中的UICollectionView 🔥

    react-native-image-picker 用Native UI来选择图片或者拍照 🔥🔥🔥

    react-native-keyboard-spacer 适用于iOS的根据键盘自动调整输入框 🔥🔥

    react-native-keyboardevents 监听键盘显示/隐藏 🔥

    react-native-lightbox 图片全屏预览 🔥🔥🔥

    react-native-looped-carousel 视图轮播 🔥🔥

    react-native-mapbox-gl 地图 🔥🔥

    react-native-maps 地图 🔥🔥🔥🔥

    react-native-material-design material design 🔥🔥🔥

    react-native-material-kit 一组UI Components,为了介绍 Material Design 🔥🔥🔥🔥

    react-native-modalbox 用于模态显示的Component 🔥🔥

    react-native-orientation 监听设备旋转 🔥

    react-native-parallax parallax效果 🔥

    react-native-parallax-scroll-view 视差滚动效果的ScrollView,支持固定header

    react-native-picker 选择器,可用于实现时间选择,区域选择 🔥

    react-native-popover 弹出气泡框的Component 🔥

    react-native-progress-hud ProgressHUD 🔥

    react-native-refresher 支持下拉刷新的listview 🔥🔥

    react-native-router类似Navigator的导航控制器 🔥🔥🔥🔥

    react-native-scrollable-tab-view 支持左右滚动的来切换tab的tableview 🔥🔥🔥🔥

    react-native-controllers 封装了 原生的iOS 导航栏,tabbar,抽屉效果等。 🔥🔥

    react-native-search-bar 封装iOS原生UISearchBar 🔥🔥

    react-native-spinkit 一组Activity指示器 🔥🔥

    react-native-splashscreen App载入视图,启动后自动隐藏 🔥

    react-native-svgkit 显示SVG格式图片 🔥🔥

    react-native-swipeout 类似TableViewCell的左滑删除,支持Component滑动 🔥🔥🔥

    react-native-swiper 视图轮播,上下/左右滑动组件,类似UICollectionView 🔥🔥🔥🔥

    react-native-tableview 封装iOS原生UITableview

    react-native-vector-icons 3000+支持自定义的图标 🔥🔥🔥🔥

    react-native-sglistview 为了解决React Native中ListView的内存问题 🔥

    react-native-invertible-scroll-view 逆向的ScrollView,从底部开始布局,适用于聊天等向上滑动来加载更多的情况 🔥

    react-native-viewpager 视图轮播,支持循环滚动,自定义视图。已做性能优化 🔥🔥🔥

    react-native-tab-navigator TabBar切换视图 🔥🔥

    react-native-loading-spinner-overlay 加载中的提示spinner 🔥,支持iOS/Android

    react-native-color-picker iOS/Android通用的颜色选择器

    react-native-pathjs-charts - 基于react-native-svg 和 paths-js写的iOS,Android通用的绘图库 🔥

    react-native-gl-model-view - 显示/动画 Wavefront,.OBJ等3D对象(iOS)

    [react-native-message-bar]((https://github.com/KBLNY/react-native-message-bar) 在屏幕底部/顶部展示通知

    react-native-fast-image 高性能的图片组件

    react-native-search-box 纯JS写的类似iOS SearchBar的组件

    react-native-splash-screen A splash screen for react-native, hide when application loaded ,it works on iOS and Android. 🔥🔥🔥🔥

    rn-placeholder 🔥 空数据的站位符,很适合用来做列表站位

    react-native-css 用CSS的方式对Component进行Style 🔥🔥

    react-native-extended-stylesheet 对stylesheet进行扩展 🔥🔥

    react-native-icons 图标

    react-native-scrollable-tab-view 可滚动标签

    react-native-side-menu 侧栏

    react-native-check-box CheckBox

    react-native-easy-toast 一款简单易用的 Toast 组件,支持 Android&iOS.

    material组件库(各种漂亮的小组件)https://github.com/xinthink/react-native-material-kit

    base组件库(各种封装不错的小组件)http://nativebase.io/docs/v0.4.6/components#anatomy
    https://github.com/GeekyAnts/NativeBase

    不错的按钮
    https://github.com/mastermoo/react-native-action-button
    https://github.com/ide/react-native-button

    炫酷效果的 TextInput
    https://github.com/halilb/react-native-textinput-effects
    https://github.com/zbtang/React-Native-TextInputLayout

    抽屉效果
    https://github.com/root-two/react-native-drawer
    https://github.com/react-native-fellowship/react-native-side-menu

    侧滑按钮
    https://github.com/dancormier/react-native-swipeout
    https://github.com/jemise111/react-native-swipe-list-view

    图表
    https://github.com/tomauty/react-native-chart

    下拉放大
    https://github.com/lelandrichardson/react-native-parallax-view

    可滑动的日历组件
    https://github.com/cqm1994617/react-native-myCalendar

    选择按钮
    https://github.com/sconxu/react-native-checkbox

    提示消息的Bar
    https://github.com/KBLNY/react-native-message-bar

    照片墙
    https://github.com/ldn0x7dc/react-native-gallery

    星星
    https://github.com/djchie/react-native-star-rating

    Text跑马灯效果
    https://github.com/remobile/react-native-marquee-label

    图片加载进度条
    https://github.com/oblador/react-native-image-progress
    轮播视图
    https://github.com/race604/react-native-viewpager
    https://github.com/FuYaoDe/react-native-app-intro
    https://github.com/appintheair/react-native-looped-carousel
    https://github.com/leecade/react-native-swiper
    毛玻璃效果
    https://github.com/react-native-fellowship/react-native-blur

    滑动可以收回头部动画的列表
    react-native-parallax-scroll-view

    下拉选择
    https://github.com/alinz/react-native-dropdown

    图片查看
    https://github.com/oblador/react-native-lightbox
    照片选择
    https://github.com/marcshilling/react-native-image-picker
    https://github.com/ivpusic/react-native-image-crop-picker
    模态视图
    https://github.com/maxs15/react-native-modalbox
    https://github.com/brentvatne/react-native-modal
    https://github.com/bodyflex/react-native-simple-modal

    按钮特效 react-native-circle-button▼
    项目名称:react-native-circle-button功能介绍:可以支持双平台的原型菜单按钮,作者灵感来源于国外设计网站dribbble,虽然可能项目用到的可能性比较小,但是可以看下实现过程。仓库地址:https://github.com/dwicao/react-native-circle-button

    酷炫折叠动画 react-native-foldview▼
    项目名称:react-native-foldview功能介绍:纯 JS 代码编写的,一个带折叠动画的列表项 UI 组件,可用在滚动列表中,展示列表详情之类的,动画效果也不错。仓库地址:https://github.com/jmurzy/react-native-foldview

    这个是一个下拉选项组件
    A react-native dropdown/picker/selector component for both Android & iOS.

    国人做的,貌似不错,支持个。
    react-native-modal-dropdown
    cnblog的中文解释

    一个比较美丽的提示气泡toast
    react-native-root-toast

    图片上拉放大:https://github.com/lelandrichardson/react-native-parallax-view

    npm install react-native-gifted-form --save
    react-native-gifted-form

    颜色渐变
    npm install react-native-linear-gradient --save
    react-native-linear-gradient

    npm i react-native-app-intro --save
    react-native-app-intro

    https://github.com/spikef/react-native-gesture-password

    https://github.com/xudafeng/autoresponsive-react-native

    一个下拉打开页面,用在选项里面贼好用
    react-native-accordion

    做通讯录想必各位同学多多少少都要接触吧?这个好用
    react-native-alphabetlistview

    老板要是让你加自动填充怎么办?这边有
    react-native-alphabetlistview

    https://github.com/Dharmoslap/react-native-responsive-image

    https://github.com/vczero/react-native-tab-menu

    https://github.com/chirag04/react-native-tooltip

    https://github.com/aroth/react-native-uploader

    https://github.com/Cocoon-break/react-native-table-row

    https://github.com/Cocoon-break/react-native-table-row

    搜索框,带历史纪录

    下拉警告

    滑动动画选择

    调用系统打电话、发短信、发邮件、打开网址功能
    https://github.com/anarchicknight/react-native-communications

    快速检索列表(按首字母)
    https://github.com/johanneslumpe/react-native-selectablesectionlistview

    图表组件
    https://github.com/tomauty/react-native-chart

    动画组件
    https://github.com/oblador/react-native-animatable

    热更新
    https://github.com/Microsoft/react-native-code-push

    热更新(似乎更好)
    https://github.com/aerofs/react-native-auto-updater

    热更新(中国人写的)
    https://github.com/fengjundev/React-Native-Remote-Update

    列表下拉刷新
    https://github.com/syrusakbary/react-native-refresher

    下拉刷新和加载更多
    https://github.com/FaridSafi/react-native-gifted-listview

    左侧菜单与官方的DrawerLayoutAndroid 用法相同,兼容iOS
    https://github.com/iodine/react-native-drawer-layout

    条码扫描
    https://github.com/ideacreation/react-native-barcodescanner

    文件上传
    https://github.com/kamilkp/react-native-file-transfer

    支持Android和ios的toast
    https://github.com/remobile/react-native-toast

    获取设备各类信息
    https://github.com/rebeccahughes/react-native-device-info

    WebStorm ReactNative的代码模板插件,包括:
    1.组件名称2.Api 名称3.所有StyleSheets属性4.组件属性
    https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

    React-native调用cordova插件
    https://github.com/axemclion/react-native-cordova-plugin

    输入自动完成
    https://github.com/FaridSafi/react-native-google-places-autocomplete

    抖一抖动画小组件(有点意思)
    https://github.com/slavik0329/react-native-bounceable

    封装后动画组件(效果较丰富)
    https://github.com/oblador/react-native-animatable

    文件上传
    https://github.com/aroth/react-native-uploader

    jpush-react-native //官方版本
    https://github.com/jpush/jpush-react-native

    react-native-jpush 由 React Native 中文网开发维护。
    https://github.com/reactnativecn/react-native-jpush

    选项卡 https://github.com/exponentjs/react-native-tab-navigator

    material组件库(各种漂亮的小组件)
    https://github.com/xinthink/react-native-material-kit

    base组件库(各种封装不错的小组件)
    http://nativebase.io/docs/v0.4.6/components#anatomy
    https://github.com/GeekyAnts/NativeBase

    不错的按钮
    https://github.com/mastermoo/react-native-action-button
    https://github.com/ide/react-native-button

    输入框表单验证
    https://github.com/gcanti/tcomb-form-native
    https://github.com/FaridSafi/react-native-gifted-form
    https://github.com/bartonhammond/snowflake

    炫酷效果的 TextInput
    https://github.com/halilb/react-native-textinput-effects
    https://github.com/zbtang/React-Native-TextInputLayout

    聊天
    https://github.com/FaridSafi/react-native-gifted-chat

    地图
    https://github.com/lelandrichardson/react-native-maps

    动画
    https://github.com/oblador/react-native-animatable

    加载动画
    https://github.com/maxs15/react-native-spinkit

    抽屉效果
    https://github.com/root-two/react-native-drawer
    https://github.com/react-native-fellowship/react-native-side-menu

    侧滑按钮
    https://github.com/dancormier/react-native-swipeout
    https://github.com/jemise111/react-native-swipe-list-view

    图表
    https://github.com/tomauty/react-native-chart

    下拉放大
    https://github.com/lelandrichardson/react-native-parallax-view

    可滑动的日历组件
    https://github.com/cqm1994617/react-native-myCalendar

    语言转化和一些常用格式转换
    https://github.com/joshswan/react-native-globalize

    单选多选ListView
    https://github.com/hinet/react-native-checkboxlist

    选择按钮
    https://github.com/sconxu/react-native-checkbox

    二维码
    https://github.com/ideacreation/react-native-barcodescanner

    制作本地库
    https://github.com/frostney/react-native-create-library

    影音相关
    https://github.com/MisterAlex95/react-native-record-sound

    安卓录音
    https://github.com/bosung90/react-native-audio-android

    提示消息的Bar
    https://github.com/KBLNY/react-native-message-bar

    iOS原生TableView
    https://github.com/aksonov/react-native-tableview

    点击弹出视图
    https://github.com/jeanregisser/react-native-popover
    https://github.com/instea/react-native-popup-menu

    3D Touch
    https://github.com/madriska/react-native-quick-actions

    双平台兼容的ActionSheet
    https://github.com/beefe/react-native-actionsheet

    照片墙
    https://github.com/ldn0x7dc/react-native-gallery

    键盘遮挡问题
    https://github.com/reactnativecn/react-native-inputscrollview
    https://github.com/wix/react-native-keyboard-aware-scrollview

    本地存储
    https://github.com/sunnylqm/react-native-storage

    星星
    https://github.com/djchie/react-native-star-rating

    国际化
    https://github.com/joshswan/react-native-globalize

    扫描二维码
    https://github.com/lazaronixon/react-native-qrcode-reader

    通讯录
    https://github.com/rt2zz/react-native-contacts

    加密
    https://www.npmjs.com/package/crypto-js

    缓存管理
    https://github.com/reactnativecn/react-native-http-cache

    ListView的优化
    https://github.com/sghiassy/react-native-sglistview

    图片和base64互转
    https://github.com/xfumihiro/react-native-image-to-base64

    安卓 iOS 白屏解决
    https://github.com/mehcode/rn-splash-screen

    Text跑马灯效果
    https://github.com/remobile/react-native-marquee-label

    清除按钮的输入框
    https://github.com/beefe/react-native-textinput

    WebView相关
    https://github.com/alinz/react-native-webview-bridge

    判断横竖屏
    https://github.com/yamill/react-native-orientation

    PDF
    https://github.com/cnjon/react-native-pdf-view

    手势放大缩小移动
    https://github.com/kiddkai/react-native-gestures
    https://github.com/johanneslumpe/react-native-gesture-recognizers

    下拉-上拉-刷新
    https://github.com/FaridSafi/react-native-gifted-listview
    https://github.com/jsdf/react-native-refreshable-listview
    https://github.com/greatbsky/react-native-pull/wiki

    下拉选择
    https://github.com/alinz/react-native-dropdown

    图片查看
    https://github.com/oblador/react-native-lightbox

    照片选择
    https://github.com/marcshilling/react-native-image-picker
    https://github.com/ivpusic/react-native-image-crop-picker

    图片加载进度条
    https://github.com/oblador/react-native-image-progress

    轮播视图
    https://github.com/race604/react-native-viewpager
    https://github.com/FuYaoDe/react-native-app-intro
    https://github.com/appintheair/react-native-looped-carousel
    https://github.com/leecade/react-native-swiper

    模态视图
    https://github.com/maxs15/react-native-modalbox
    https://github.com/brentvatne/react-native-modal
    https://github.com/bodyflex/react-native-simple-modal

    毛玻璃效果
    https://github.com/react-native-fellowship/react-native-blur

    头像库
    https://github.com/oblador/react-native-vector-icons

    滑动选项卡
    https://github.com/skv-headless/react-native-scrollable-tab-view

    倒计时,电商APP,秒杀、团购倒计时
    https://github.com/jackuhan/react-native-CountDowntimer

    可滚动标签,可以点击切换,每个 tab 可以有自己的 ScrollView,点击切换的时候可以维护自己的滚动方向。
    类似网易新闻标签(首页)
    https://www.npmjs.com/package/react-native-scrollable-tab-view

    视频播放
    npm install react-native-video –save

    一款简单易用的 Toast 组件,支持 android&iOS.
    https://github.com/crazycodeboy/react-native-easy-toast?utm_source=tuicool&utm_medium=referral

    参考

    https://blog.csdn.net/Keep_Moving31038/article/details/77693737

    https://www.jianshu.com/p/c7a8f115dca0

    展开全文
  • 最近公司项目有一个移动端app,决定采用react-native开发,项目中有这么个要求,要求react-native中嵌入原生页面,然后原生页面嵌入unity,并实现原生和unity之前相互通信,网络查找资料后实现这些功能,查找过程中...

     本人是做后端php的,对各类语言和方向都有兴趣,多而不精。最近公司项目有一个移动端app,决定采用react-native开发,项目中有这么个要求,要求react-native中嵌入原生页面,然后原生页面嵌入unity,并实现原生和unity之前相互通信,网络查找资料后实现这些功能,查找过程中,遇到很多问题,并且参照了很多网友的博客,在此做一个记录,以防后患。

     

    开发环境及工具:

    macbook pro, webstorm,android studio,unity

    本篇文章是第一篇,实现react-native加入android原生。 

     

     1.创建react-native项目:react-native init rauDemo

     进入目录:cd rauDemo

     用webstorm打开项目进行编辑项目,android studio打开内部android项目,本步的目的是指定本机的android sdk的路径,否则会报如下错误:

            *What went wrong:

            Aproblem occurred configuring project ':app'.

     > SDK location not found.Define location with sdk.dir in the local.properties file or with anANDROID_HOME environment variable.

    测试运行:usb连接手机,react-native run-android

    成功运行,如下图:

     

    2.android studio打开的android目录如下:

     

     

     

    添加代码,将java方法封装成react可调用的方法,按照官方方式:

    在src/main/java/com.raudemo下添加代码,

    (1)添加RedirectModule.java,代码如下:

    public class RedirectModule extends ReactContextBaseJavaModule {

    public RedirectModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "RedirectModule";
    }

    /**
     * 从JS页面跳转到原生activity 同时也可以从JS传递相关数据到原生
     * @param name 需要打开的Activity的class
     * @param params
     */
    @ReactMethod
    public void startActivityFromJS(String name, String params){
        try{
            Activity currentActivity = getCurrentActivity();
            if(null!=currentActivity){
                Class toActivity = Class.forName(name);
                Intent intent = new Intent(currentActivity,toActivity);
                intent.putExtra("params", params);
                currentActivity.startActivity(intent);
            }
        }catch(Exception e){
            throw new JSApplicationIllegalArgumentException(
                    "不能打开Activity : "+e.getMessage()+e.toString());
        }
    }

}
    

     

    (2)添加MyReactPackage.java,代码如下:

     

    public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(
                new RedirectModule(reactContext)
        );
    }

    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();

    }
}
    

    (3)MainApplication.java添加代码:new MyReactPackage(),最后如下:

    public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new MyReactPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}
    

     

    最后项目结构如图:

     

     

    3.android studio新建页面,命名UnityActuivity,为之后嵌入Unity程序准备。
    修改页面布局,代码包里有,需要将UnityActivity设置成横屏,在AndroidManifest.xml里面UnityActivity添加android:screenOrientation="landscape",原因是Unity导出的程序会有屏幕横屏等设置,需要相对应。过后说这个问题

    4.修改react-native代码:

    在App.js内导入TouchableOpacity和NativeModules组件,NativeModules即为react-native提供的入口,android原生写的RedirectModule可以通过这个组件读到。
    Return的页面里面添加如下代码:
    <TouchableOpacity onPress={()=>{
    NativeModules.RedirectModule.startActivityFromJS('com.raudemo.UnityActivity','eeeee')
}}>
  <Text>
    跳转原生android
  </Text>
</TouchableOpacity>
    
    目的是实现点击跳转原生页面。
    截图如下:

     

    点击跳转后如下:

     

     

    至此,react-native跳转原生页面完成。

    完整代码:稍后奉上

     

    展开全文
  • RN使用react-native-image-picker + aliyun-oss-react-native 上传图片 今天记录一下在RN使用react-native-image-picker以及aliyun-oss-react-native完成上传图片 如果是原生和RN混合开发,首先执行以下代码: yarn...
  • 在初始化创建项目并通过yarn add react-navigation和yarn add react-native-gesture-handler加载导航依赖包时,这两个过程一切正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,...
  • 然后找到了react-native-amap3d这个第三方组件,很好用的一个地图组件,文档还比较细,GitHub上面Issuse也很活跃。 初次使用react-native开发APP还是有一些困难,这个组件是需要链接原生库的。就是说要使用react-...
  • 在网上查找相关组件,开始使用的是react-native-qrcode组件,截图功能使用的是react-native-view-shot组件,保存图片则是使用的react-native自带的CameraRoll模块。以为这样就可以万事大吉了,没想到还是出了不明...
  • 近来想研究新的动画加载组件,找到了一个react-native-spinkit ,感觉使用起来很不错,记录一下使用的过程。 效果展示: 其他动画效果: 那么,让我们提起裤子开干吧! 环境版本: "react": "^16.2.0",...
  • rn中默认内置组件navigator.geolocation可以获取定位信息(注意默认百度坐标系,可能还需要转换坐标系),此时部分android机中会有兼容性问题,导致获取位置信息会超时,这时采用第三方组件库react-native-amap-...
  • react-native 自定义封装刷新...写过java的同学,再去学习reactreact-native就会比较容易上手,并且会有一种似曾相识的感觉,不错,今天我要总结的刷新就是和Android原生的刷新很类似的一种实现,在Android原生当中,
  • react-native和H5的通信

    2019-07-19 20:14:05
    1.react-native 和 H5通信的情景 首先如果你的项目中需要接入一个H5写的项目,但是这个服务有必须用到react-native中的服务比如打开摄像头,获取地理位置等等。但是这些数据在H5中是获取不到的,那么就需要和react-...
  • 前几篇的react-native相关博客,写到简书上了,发现代码的排版不好,不美,所以又回来了. 先简单的说一下统一,入口页面的代码,大家都知道react-native的强大在与一套代码多终端运行, 但是大家init react-native项目的...
  • 在创建好React-native的初始化项目后,运行yarn ios之后只是显示如下图 在虚拟机上没有任何的显示,这个其实不是个bug,在react-native环境安装好的情况下,一般不会出现程序上面的错误,这个是运行的命令不对。 ...
  • react-native技术的优劣

    2018-02-27 23:35:18
    从2017年初开始到现在,使用React-Native做项目已经一年了。我们做的是一款IM软件,嵌入在一个手机游戏平台的工程内部。之所以要采用react-native(后文简称RN)框架重构它,是因为现在游戏大厅上的所有游戏都是热...
  • 前几天在初始化一个项目,在yarn add react-navigation和yarn add react-native-gesture-handler步骤都正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,总是报如下的错: 尽管在网上...
  • 不知道何时开始, iconfont 成为了 App 开发的利器,不仅因为它是矢量图标,可以轻松... 而 react-native-vector-icons 是在 GitHub 上最火的 React Native 的 iconfont 图标库,也是这文章的主角。 react-native...
  • 今天遇到了一个问题:下载了react-native-baidu-map的开源组件,可是在ios中遇到了问题,编译不通过,我想删除这个组件,然后写其他的功能,以后再添加这个地图功能,可是发现无法删除干净,android和ios原生都编译...
  • 项目组用react-native开发app,前阵子有新需求,需要用android原生实现,将原生集成到react-native项目中调用主要涉及到:1)rn的js页面调用android原生(跳转到原生页面)2)rn跳转到原生时带值过去3)原生执行结束...
1 2 3 4 5 ... 20
收藏数 17,119
精华内容 6,847
关键字:

原生react-native