react-native-app-upgrade使用

作者: 不一样的心情_eb40 | 来源:发表于2018-05-28 17:12 被阅读50次

    react-native-app-upgrade 是一个reactnative版本升级的方案,弄得时候遇到了很多的问题,因为android不会遇到了很多问题,最后终于是打包出来了,现在记录一下
    GitHub地址

    方案的作者是使用原生的方法来实现的,具体的配置大概如下(我的项目名为App):

    android 配置

    1.将【 android_upgrade 】包拷贝到你的Android项目包名目录下(app/src/main/com.xxx)


    image.png

    2.在 app / src / main / res /目录下创建xml资源文件夹,并创建名称为【 update_file_provider 】名称的xml文件,在文件中添加如下代码:

     <paths>
            <external-cache-path
                name="update_external_cache"
                path="." />
    
            <cache-path
                name="update_cache"
                path="." />
        </paths>
    
    image.png

    注:如果引用了react-native-image-crop-picker组件,就需要合并了一下react-native-image-crop-picker组件的xml,合并后的文件如下:

    <paths>
        <!--升级-->
        <external-cache-path
                name="update_external_cache"
                path="." />
    
        <cache-path
                name="update_cache"
                path="." />
     <!--image-crop-picker中的不重复的-->
        <external-path name="external_files" path="."/>
    </paths>
    

    3.在AndroidMainfest.xml文件下添加权限和服务配置

        <uses-permission android:name="android.permission.INTERNET" />
        <!--8.0安装需要的权限-->
        <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>   
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    
     <application
          android:name=".MainApplication"
          android:allowBackup="true"
          android:label="@string/app_name"
          android:icon="@mipmap/ic_launcher"
          android:theme="@style/AppTheme">
          
            // 添加fileProvider配置代码
            <provider
                android:name="android.support.v4.content.FileProvider"
                android:authorities="${applicationId}.updateFileProvider"
                android:exported="false"
                android:grantUriPermissions="true">
                <meta-data
                    android:name="android.support.FILE_PROVIDER_PATHS"
                    android:resource="@xml/update_file_provider" />
            </provider>
         
            // 添加Service代码
            <service
                android:name=".android_upgrade.DownloadService"
                android:exported="true" />
                
                // 省略其他代码... 
        </application>
    

    如果使用了react-native-image-crop-picker组件就需要按以下配置

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.app">
    
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.CAMERA"/>
        <!--8.0安装需要的权限-->
        <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
        <application
          android:name=".MainApplication"
          android:label="@string/app_name"
          android:icon="@mipmap/ic_launcher"
          android:allowBackup="true"
          android:theme="@style/AppTheme">
    
        <!--// 添加fileProvider配置代码-->
        <provider
            android:name="android.support.v4.content.FileProvider"
            android:authorities="${applicationId}.updateFileProvider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/update_file_provider" />
        </provider>
    
        <!--// 添加Service代码-->
        <service
            android:name=".android_upgrade.DownloadService"
            android:exported="true" />
    
        <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
            <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
        </intent-filter>
        </activity>
          <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        </application>
    
    </manifest>
    
    

    4.打开android/app/build.gradle文件,修改 compileSdkVersion 26 buildToolsVersion "26.0.3",版本指定为26以上即可。

    5.在你的工程目录中,打开android/app/src/main/res/values/strings.xml文件,添加如下代码:
    <string name="android_auto_update_download_progress">正在下载:%1$d%%</string>

    6.在MainApplication.java文件下的getPackages方法中添加如下代码:[首先要将UpgradePackage导入]

    import 项目工程包名.UpgradePackage;
        new UpgradePackage()
    
    image.png

    7.android_upgrade包下的DownloadService.java 需要将作者的改成自己的包名

    image.png
    UpgradePackage.java如果报错就是把@Override删了
    image.png

    8.如果装了组件react-native-image-crop-picker还需要去组件/node_modules/react-native-image-crop-picker/文件夹中修改文件
    修改/node_modules/react-native-image-crop-picker/android/src/main/java/com.reactnative/ivpusic/imagepicker/PickerModule.java文件

    1)添加如下代码:
        private String fileProviderAuthorities = "provider";
    
    (2)添加如下方法:
        @ReactMethod
        public void setFileProviderAuthorities(String fileProviderAuthorities) {
          this.fileProviderAuthorities = fileProviderAuthorities;
        }
    
    (3) 修改303行代码,替换成如下方法:
        mCameraCaptureURI = FileProvider.getUriForFile(activity,
          activity.getApplicationContext().getPackageName() + "." + this.fileProviderAuthorities,
          imageFile);
     
    

    注释node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml文件

    image.png

    之后在使用ImagePicker前,先调用setFileProviderAuthorities方法即可。Android是自己写的判断是否安卓

        if(Android) {
          ImagePicker.setFileProviderAuthorities('updateFileProvider');
        }
        ImagePicker.openPicker({...})
    

    IOS配置

    将ios_upgrade里面的文件拷贝到项目目录下


    image.png

    使用

    1.Android

    if(Android) {
                            this.setState({                
                                apkUrl:'http://XXXXX'
                            })
                            Alert.alert('发现新版本','是否下载',
                            [
                                {text:"确定", onPress:() => {
                                    //apkUrl为app下载连接地址
                                    NativeModules.upgrade.upgrade(this.state.apkUrl);  
                                }},
                                // {text:"取消", onPress:this.opntion2Selected}            
                                {text:"取消"}    
                            ]
                            ); 
                        }   
    
     DeviceEventEmitter.addListener('LOAD_PROGRESS',(msg)=>{        
                // let title = "当前下载进度:" + msg
                // if(Android)ToastAndroid.show(title, ToastAndroid.SHORT);
            });
    

    2.IOS

    //AppId为上架后的应用的AppId可以到开发者中心中查看
     if(iOS) {
                NativeModules.upgrade.upgrade('AppId',(msg) =>{  
                    if('YES' == msg) {                     
                       Alert.alert('发现新版本','是否下载',
                       [
                           {text:"确定", onPress:() => {
                               //跳转到APP Stroe
                                NativeModules.upgrade.openAPPStore('AppId');  
                           }},      
                           {text:"取消"}    
                       ]
                       );                   
                    } else {  
                    //    this.toast('当前为最新版本');  
                    }  
                })             
            }
    

    相关文章

      网友评论

      本文标题:react-native-app-upgrade使用

      本文链接:https://www.haomeiwen.com/subject/prkujftx.html