React Native开源封装AES,MD5加密模块(react-native-encryption-library)

本文来自:江清清的技术专栏(http://www.lcode.org)

开源项目地址:https://github.com/jiangqqlmj/react-native-encryption-library

项目介绍

昨天自己封装了常用的加密方式例如:MD5,AES加密,供React Native进行使用,不过当前项目适配Android平台。

刚创建的React Native交流5群:386216878,欢迎各位大牛,React Native技术爱好者加入交流!

安装配置

?

1	npm install react-native-encryption-library --save

In android/setting.gradle

?

1 2 3

... include ':react-native-encryption-library' project( ':react-native-encryption-library' ).projectDir = new File(rootProject.projectDir, '../node_modules/react-native-encryption-library/android' )

In android/app/build.gradle

?

1 2 3 4 5

... dependencies {      ...      compile project( ':react-native-encryption-library' ) }

register module (in MainActivity.java)

On newer versions of React Native (0.18+):

?

1 2 3 4 5 6 7 8 9 10 11

import com.chinaztt.encapsulation.EncryptionReactPackager;;  // <--- import   public class MainActivity extends ReactActivity {    ......      @Override      protected List<ReactPackage> getPackages() {        return Arrays.<ReactPackage>asList(           new EncryptionReactPackager(), // <------ add here          new MainReactPackage());      } }

On older versions of React Native:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

import com.chinaztt.encapsulation.EncryptionReactPackager;;  // <--- import   public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {    ......      @Override    protected void onCreate(Bundle savedInstanceState) {      super .onCreate(savedInstanceState);      mReactRootView = new ReactRootView( this );        mReactInstanceManager = ReactInstanceManager.builder()        .setApplication(getApplication())        .setBundleAssetName( "index.android.bundle" )        .setJSMainModuleName( "index.android" )        .addPackage( new MainReactPackage())        .addPackage( new EncryptionReactPackager())              // <------ add here        .setUseDeveloperSupport(BuildConfig.DEBUG)        .setInitialLifecycleState(LifecycleState.RESUMED)        .build();        mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN" , null );        setContentView(mReactRootView);    }      ......   }

导入模块

?

1 2	import {NativeModules} from 'react-native' ; var EncryptionModule=NativeModules.EncryptionModule

使用实例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

import React, { Component } from 'react' ; import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableHighlight } from 'react-native' ; import {NativeModules} from 'react-native' ; var EncryptionModule=NativeModules.EncryptionModule   //待加密的信息 var PASSWORD= '745r#x3g' ; var KEY= 'wIEuw3kAGwVNl7BW' ;  //16位AES加密私钥   class CustomButton extends React.Component {    render() {      return (        <TouchableHighlight          style={styles.button}          underlayColor= "#a5a5a5"          onPress={ this .props.onPress}>          <Text style={styles.buttonText}>{ this .props.text}</Text>        </TouchableHighlight>      );    } } class react_native_encryption_library extends Component {    constructor(props){       super (props);       this .state={          result: '' ,          AES_Result: '' ,       }    }    async _MD5ByPromise(){       try {          var result=await EncryptionModule.MD5ByPromise(PASSWORD);          this .setState({result: 'Promise:' +result});       } catch (e){          this .setState({result: 'MD5加密失败-通过Promise回调' });       }    }    async _AESEncryptByPromise(){       try {          var result=await EncryptionModule.AESEncryptByPromise(PASSWORD,KEY);          this .setState({AES_Result:result});       } catch (e){          this .setState({AES_Result: 'AES加密失败-通过Promise回调' });       }    }      async _AESDecryptByPromise(){       try {          var result=await EncryptionModule.AESDecryptByPromise( this .state.AES_Result,KEY);          this .setState({AES_Result:result});       } catch (e){          this .setState({AES_Result: 'AES解密失败-通过Promise回调' });       }    }    render() {      return (        <View style={styles.container}>          <Text style={styles.welcome}>             加密模块封装实例-Android端          </Text>          <Text style={{margin:10,fontSize:12}}>             结果:{ this .state.result}          </Text>          <CustomButton             text= "测试MD5加密封装-CallBack回调"             onPress={()=>EncryptionModule.MD5ByCallBack(PASSWORD,(msg)=>{                 this .setState({result: 'CallBack:' +msg});            },(error)=>{                 this .setState({result: 'MD5加密失败-通过Callback回调' });              })}          />          <CustomButton             text= "测试MD5加密封装-Promise回调"             onPress={()=> this ._MD5ByPromise()}          />           <Text style={{margin:10,fontSize:12}}>             AES结果:{ this .state.AES_Result}          </Text>          <CustomButton             text= "测试AES加密封装-CallBack回调"             onPress={()=>EncryptionModule.AESEncryptByCallBack(PASSWORD,KEY,(msg)=>{                 this .setState({AES_Result:msg});            },(error)=>{                 this .setState({AES_Result: 'AES加密失败-通过Callback回调' });              })}          />          <CustomButton             text= "测试AES加密封装-Promise回调"             onPress={()=> this ._AESEncryptByPromise()}          />          <CustomButton             text= "测试AES解密封装-CallBack回调"             onPress={()=>EncryptionModule.AESDecryptByCallBack( this .state.AES_Result,KEY,(msg)=>{                 this .setState({AES_Result:msg});            },(error)=>{                 this .setState({AES_Result: 'AES解密失败-通过Callback回调' });              })}          />          <CustomButton             text= "测试AES解密封装-Promise回调"             onPress={()=> this ._AESDecryptByPromise()}          />        </View>      );    } } const styles = StyleSheet.create({    welcome: {      fontSize: 20,      textAlign: 'center' ,      margin: 10,    },    button: {      margin:5,      backgroundColor: 'white' ,      padding: 15,      borderBottomWidth: StyleSheet.hairlineWidth,      borderBottomColor: '#cdcdcd' ,    }, }); AppRegistry.registerComponent( 'encryption_library' , () => react_native_encryption_library);

运行效果