key reactnative

2019-04-09 20:41:42 xiangzhihong8 阅读数 1483

概述

自从2015年4月React Native 发布以来后,关于移动跨平台的话题就层出不穷,不管是大公司还是小公司都在开始使用React Native 来开发跨平台App。不过,也有公司对React Native 并不看好,如Airbnb在去年就开始宣布弃用React Native ,不管如何,React Native 的跨平台的目的是很诱惑的。

紧接着google发布了跨平台框架Flutter,对于这个颠覆式的框架,可以说受到大多数开发者和公司的青睐,因为它是google开发的,目前活跃度明显超过了React Native。

自从Flutter诞生后,React Native已经感受到了压力,因此加快了优化的进度。去年底公布了优化方案,目前正在重构js引擎,最大提升js的性能问题。毕竟React Native低层还是基于原生的系统去做的,目前来看有一定的优势,而且社区庞大,短期用户量还是有的。Flutter虽然流畅,UI层独立,但是很多插件还是要基于原生系统架构,不能完全独立。

但是,不管是React Native还是Flutter,它们都不能脱离原生系统,除非android和iOS系统被另外一个系统取代。所以,不管未来如何,对于前端同学来说,React Native还是很有诱惑力的,它让前端同学有能力开发媲美原生应用的能力。

在前端框架中,作为仅次于React 的框架,Vue在国内的趋势可以说已经超过React,更是受到广大程序员的喜爱。正是基于此,一家名叫GeekyAnts 的印度公司开发了 Vue Native,病用它来开发基于 React Native 的跨平台应用。

Vue Native

安装

安装Vue Native可以使用vue-native-cli脚手架方式,安装的命令如下:

npm install -g vue-native-cli

新建项目

安装vue-native-cli工具后,接下来就可以使用vue-native-cli的命令行来新建Vue Native应用。

vue-native init <projectName>
cd <projectName>

安装依赖包

创建项目后,还需要安装以下一些依赖包:

npm install vue-native-core vue-native-helper —save
npm install vue-native-script —save-dev

Hello Word

例如,下面是一个使用Vue编写的React Native程序,运行效果如下图:
在这里插入图片描述
和 React Native使用React一样,Vue Native使用的是Vue语法,开发者可以直接使用Vue语法来开发跨平台应用,对于熟悉Vue的开发者来说,使用Vue来开发移动应用可谓得心应手。
和React Native一样,使用vue-native-cli初始化一个新的 app时,app的入口文件为App.vue。并且,开发者可以使用很多.vue文件来组合一个新的.vue文件,在app编译时系统会将所有的vue 文件翻译成以.js 后缀的 React Native 组件,最后调用原生组件进行渲染。

指令

在 Vue 中,指令是可以说是一种特殊的属性,他们都以v-作为前缀。

v-if 和 v-else

v-if和v-else用来编写条件语句。例如:

<template>
    <view class="container">
        <view class="btn-container">
            <button title="show A" :on-press="() => handleBtnClick('A')" />
            <button title="show B" :on-press="() => handleBtnClick('B')" />
            <button title="show C" :on-press="() => handleBtnClick('C')" />
        </view>
        <view>
            <text v-if="type === 'A'">
                A
            </text>
            <text v-else-if="type === 'B'">
                B
            </text>
            <text v-else-if="type === 'C'">
                C
            </text>
            <text v-else>
                Not A/B/C
            </text>
        </view>
    </view>
</template>

运行效果如下:
在这里插入图片描述

v-for

当然,还使用v-for指令来写循环,和 JavaScript 的 map 类似。例如:

<template>
 <view class="container">
   <text
       class="text-container"
       v-for="todo in todos"
       :key="todo.text"
   >
     {{ todo.text }}
   </text>
 </view>
</template>
<script>
export default {
 data: function() {
   return {
     todos: [
       { text: "Learn JavaScript" },
       { text: "Learn Vue" },
       { text: "Build something awesome" }
     ]
   };
 }
};
</script>

运行效果如下:
在这里插入图片描述

示例

KitchenSink

KitchenSink是一个使用Vue 重写的Vue Native应用,源码地址为:https://github.com/GeekyAnts/KitchenSink-Vue-Native,可以下载源码并进行二次开发。

Todo

除了KitchenSink外,你也可以下载ToDo 应用,它是GeekyAnts 的高级软件工程师Ankit Singhania使用 Vue Native 编写的Vue Native应用,下载地址为:https://github.com/ankitsinghania94/vue-native-todo-app

其他

Vue Native 使用vue-router来实现导航逻辑,我们来看看下面的实现:
在这里插入图片描述
应用的状态,使用的是Vuex,具体可以参考Vue官网
当然,这个库目前还在开发和升级中,并且React Native本来就很坑,Vue Native不过是为Vue开发移动应用提供了可能,还不好用目前并不好说。

2018-11-14 11:07:21 weixin_43692670 阅读数 727

react native rsa加密

最近用react native开发客户端,项目采用RSA非对称加密(项目负责人说银行都采用RSA加密咱也用)。尝试了好多库,都有各种不同问题(node-rsa(可能是"react-native": "0.57.4"版本与之不匹配,故放弃),jsencrypt,react-native-rsa-native)。最终采用react-native-rsa:

第一步引入react-native-rsa库:
npm install react-native-rsa --save
npm install buffer --save //根据项目需要进行选择性添加,如果服务器返回的就是hex格式不用添加,直接加密就可

第二步:
import RSAKey from ‘react-native-rsa’;
import {Buffer} from ‘buffer’; //根据项目需要进行选择性添加,如果服务器返回的就是hex格式不用添加

第三步:

CloudInterface.testRSAClient((data) => {

	   let publicKey = data.modulus;   
	    //因为react-native-rsa只支持rsa加密中的modulus,不支持publicKey。如果必须用publicKey,建议另寻它库。
	    
       var b = new Buffer(publicKey , 'base64');  
       //因为服务器传过来的是base64格式编码
       
       var s = b.toString('hex'); 
       //react-native-rsa只支持hex格式加密,所以必须转换
       
       let ConsultPublicKey = {n:s,e:'10001'};  
       // 准备好参数对象,这里提下,n  和  e 是与rsa modulus 方式必须的参数。如果你看到 其他平台有提到 ‘AQAB’ 和这里的  ‘10001’ 是一样的。你可以尝试将AQAB转成hex格式看看。
       
       var rsa = new RSAKey();
       rsa.setPublicString(JSON.stringify(ConsultPublicKey));
       
       var originText1 = '12345';
       var encrypted1 = rsa.encrypt(originText1);
       
       let tempBuffer = new Buffer(encrypted1,'hex');
       //将加密后的文本从hex转回
       
       let tempBuffer3= tempBuffer.toString('base64');
       //再转为base64格式发给服务器

})

第四步:
如果用以上加密发给服务器的密文可以成功解密那么就可以忽略一下步骤,如果不可以成功解密。请检查一下情况:
首先:与服务器端确认他给你的publickey是否转为modulus。
如果不是那么请修改服务端代码,让他给你返回的是modulus,而不是publickey:
在这里插入图片描述

《完》

2018-01-22 16:53:04 qq_39711712 阅读数 3902

Warning:Each child in an array or iterator should have a unique “key” prop.

解决方法:在数组名.map等循环子项中添加key属性

array.map((value, index) => {
    return (
        <View key={value.toString()}>//循环子项加key
        < DeviceView
            img={require('../resources/images/ic_storage.png')}
            header={this.sdName[index]}
            body={value}
        />
            <View style={styles.itemDividerView}>
                <View style={styles.itemDivider}/>
            </View>
        </View>
    )
})

2016-01-15 21:40:31 jiangqq781931404 阅读数 23282

转载请标明出处:

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),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

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

      

2017-01-12 17:11:54 huaxun66 阅读数 1098

React Native概述

什么是React Native

React Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)。

React Native与React.js区别

那么React Native与React.js有什么区别呢?
任何一种跨平台框架都有两个部分:UI和逻辑。对于这两种技术来说,UI都使用的是JSX,而逻辑都是用的是JavaScript。
React Native与React.js的主要区别还是JSX,不管是React Native还是React.js,在UI上都是用了一种技术:虚拟DOM(Virtual DOM)。

那么什么是虚拟DOM呢?
其实JSX只是一种语法糖。DOM(Document Object Model 文档对象模型)是WEB前端描述网页的一种树形数据结构,WEB通过DOM管理Element,而DOM的效率是比较低的,为了提高DOM的效率,React.js提供了虚拟DOM,这项技术的工作是完全在内存中实现的,而且是增量修改DOM树,所以效率非常高。

对于WEB来说,在实际渲染时,仍然需要DOM,所以最终渲染时,虚拟DOM仍然要转换成实际DOM。而对于Android或者iOS,就没有DOM的概念,UI完全是本地控件实现的,如Android中的TextView和EditText等。所以React Native就应运而生,如果说React.js是在运行时将虚拟DOM映射成实际DOM,那么React Native就是在运行时将虚拟DOM映射成Android或者iOS的本地控件。
从这一点可以看出,React.js用于WEB开发,而React Native用于开发Android和iOS App,它们都将UI抽象成虚拟DOM,只是实际运行时,前者将虚拟DOM映射成了DOM,后者将虚拟DOM映射成Android或iOS的本地控件。

为什么需要 React Native?

What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.
摘自2015.3.26 React Native的发布稿,加粗的关键字传达了React Native的设计理念:既拥有Native的用户体验、又保留React的开发效率。这个理念似乎迎合了业界普遍存在的痛点。

React Native项目成员Tom Occhino发表的React Native: Bringing modern web techniques to mobile,详细描述了React Native的设计理念。Occhino认为尽管Native开发成本更高,但现阶段Native仍然是必须的,因为Web的用户体验仍无法超越Native:

  • Native的原生控件有更好的体验;
  • Native有更好的手势识别;
  • Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。

Occhino没提到的还有Native能实现更丰富细腻的动画效果,归根结底是现阶段Native具有更好的人机交互体验。笔者认为这些例子是有说服力的,也是React Native出现的直接原因。

“Learn once, write anywhere”同样出自Occhino的文章。因为不同Native平台上的用户体验是不同的,React Native不强求一份原生代码支持多个平台,所以不提“Write once, run anywhere”(Java),提出了“Learn once, write anywhere”。

这里写图片描述

这张图是笔者根据理解画的一张示意图,自下而上依次是:

  1. React:不同平台上编写基于React的代码,“Learn once, write anywhere”。
  2. Virtual DOM:相对Browser环境下的DOM而言,Virtual DOM是DOM在内存中的一种轻量级表达方式(原话是lightweight representation of the document),可以通过不同的渲染引擎生成不同平台下的UI,JS和Native之间通过Bridge通信。
  3. Web/iOS/Android:上层与用户交互的UI界面。

React Native的优势

上面讲到React Native的设计理念:既拥有Native的用户体验、又保留React的开发效率,是如何实现的呢?

由于React Native的UI仍然使用Android或iOS的本地控件,所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript,但由于JavaScript是即时编译的,也就是第一次使用时会将JavaScript代码编译成二进制文件,所以JavaScript得运行效率比较高。因此,React Native的运行效率要比基于HTML5、CSS等技术的PhoneGap、AppCan高很多(国内外比较流行的Hybrid混合开发方式,原理是依赖Android或iOS的webview浏览器显示HTML5,是纯的WEB程序在移动端的运行),因为这些技术直接使用HTML5进行渲染,而HTML5会大量使用DOM技术,DOM在PC端的WEB应用中也不算快,在移动端就更慢了。

React Native一旦虚拟DOM映射本地控件完成,理论上来说,使用React Native所编写的App的运行效率和我们使用本地语言(Android的Java,iOS的OC或Swift)开发的App达到一致。

总结:
基于React Native的App在运行效率上接近于Native App,而且还具有混合开发模式的两个优点:

  • 热更新(无需重新编译上传App即可更新,而且还不用通过App Store审核)
  • 跨平台(降低了学习成本,使用同样的技术开发Android和iOS应用)

React Native特点

虚拟DOM

提到React最先想到的就是虚拟DOM。因为这个想法实现是太好了。简而言之就是,React中UI界面是一棵DOM树,对应的我们创建一个全局唯一的数据模型,每次数据模型有任何变化,都将整个数据模型应用到UI DOM树上,由React来负责去更新需要更新的界面部分。
传统的DOM比较需要一个节点一个节点比,时间复杂度是O(N3),React 通过分层求异的策略,对 tree diff 进行算法优化,简单说,这种虚拟DOM算法是同级的进行比较,并不进行跨层级比较,所以比较一次只需要O(N)的时间,效率非常高。当然这种情况下如果你对组件进行跨层级的移动,虚拟DOM会认为是删除了一个组件而新建了一个组件,会影响效率,所以开发中一般不进行跨层次的移动组件。
此外,React对同层级的比较中通过设置唯一 key的策略来优化了比较策略,大大的提高了效率,具体的看下这篇博客—不可思议的react diff,写得很清楚。这里就不再赘述。

JSX定义界面

JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,将HTML直接嵌入到JavaScript代码中。看下示例代码:

var React = require(‘React’);
var message =
  <div class=“hello”>
    <span>Hello World</span>
  </div>;
React.renderComponent(message, document.body);

很奇怪的写法。但是确很直观,开发起来也很快。不需要过多考虑模板的概念,只需要考虑如何用代码构建整个界面。

单向数据流

React本身只是View层,对于事件传输层FB建议使用Flux这种单向传输架构。Flux 是一种架构思想,它分为View(视图层)、Action(动作)、Dispatcher(派发器)、Store(数据层)四层。数据流的流向参考下图:
这里写图片描述

首先用户访问 View,并通过View 发出用户的 Action。Dispatcher 接到Action后就要求 Store 进行相应的更新。store更新后会发一个事件到View上,最后View更新页面。简单的理解可以认为它是一种全局的消息发布订阅模型。Action可以来自于用户的某个界面操作,比如点击等;也可以来自服务器端的网络返回。当数据模型发生变化时,就触发刷新整个界面。
看下这篇文章—Flux架构入门。在RN中用的比较多的Flux框架是Redux,可以看这个链接进行学习—Redux自述

独特的数据模型

React的所有数据都是只读的,如果需要修改它,那么你只能产生一份包含新的修改的数据。这样做是为了让代码更加的安全和易于维护。React将用户界面看做简单的状态机器。当组件处于某个状态时,那么就输出这个状态对应的界面。在React中,只要简单的去更新某个组件的状态,React就公以最高效的方式去比较两个界面并更新DOM树。

React-Native生命周期

与Activity类似,RN也有自己的生命周期。先看下我在网上找的一张生命周期图,很完整:
这里写图片描述

下面分点讲下各种方法:

  • getDefaultProps:在组件创建之前,会先调用 getDefaultProps(),这是全局调用一次。在组件被创建前加载。
  • getInitialState(),来初始化组件的状态。
  • componentWillMount:准备开始加载组件。在整个生命周期中只被调用一次,可以在这里做一些业务初始化操作,也可以设置组件状态。
  • componentDidMount:在组件第一次绘制之后调用,这个函数调用的时候,其虚拟DOM已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是,RN 框架是先调用子组件的componentDidMount(),然后调用父组件的函数。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时setTimeout 或发起网络请求。这个函数之后,就进入了稳定运行状态,等待事件触发。
  • componentWillReceiveProps:如果组件收到新的props,就会调用componentWillReceiveProps(),在这个回调函数里面,你可以根据属性的变化,通过调用 this.setState()来更新你的组件状态,这里调用并不会触发额外的 render() 调用。
  • shouldComponentUpdate:当组件接收到新的属性和状态改变的话,都会触发调用shouldComponentUpdate(…),这个函数的返回值决定是否需要更新组件,如果true表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。
  • componentWillUpdate:如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(…) 返回为true,就会开始准更新组件,并调用componentWillUpdate(),在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用this.setState来修改状态。紧接着这个函数,就会调用 render() 来更新界面了
  • componentDidUpdate:调用了 render() 更新完成界面之后,会调用 componentDidUpdate()来得到通知。
  • componentWillUnmount当组件要被从界面上移除的时候,就会调用componentWillUnmount()。在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。