一看就会！教你在React Native获取app版本号 (六)

RN项目名为hotApp 

1、IOS

在项目的ios > hotApp文件目录下，增加AppVersion.h、AppVersion.m文件。（IOS原生开发读取版本的函数）

AppVersion.h

#import 

#import 
NS_ASSUME_NONNULL_BEGIN

@interface AppVersion : NSObject

@end

NS_ASSUME_NONNULL_END

 AppVersion.m

#import "AppVersion.h"

@implementation AppVersion
@synthesize bridge = _bridge;

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(getAppVersion:(RCTResponseSenderBlock)callback)
{
  NSString *version = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVersionString"];
  callback(@[[NSNull null],version]);
  
}

@end

2、Android

在项目的android > app > src > main > java >com > hotapp > rn文件目录下，增加RNReactPackage.java、RNBridgeManager.java文件。（IOS原生开发读取版本的函数）

RNBridgeManager.java

package com.hotapp.rn; //这儿的hotapp换成目录下对应的app名字即可,一般为小写

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.uimanager.IllegalViewOperationException;
import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;

public class RNBridgeManager extends ReactContextBaseJavaModule {

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

    //重写getName方法声明Module类名称,在RN调用时用到
    @Override
    public String getName() {
        return "BridgeManager";
    }

    //声明的方法，外界调用
    @ReactMethod
    public void getAppVersion(Callback successCallback) {
        try {
            PackageInfo info = getPackageInfo();
            if(info != null){
                successCallback.invoke(info.versionName);
            }else {
                successCallback.invoke("");
            }
        } catch (IllegalViewOperationException e){

        }
    }

    //获取 APP 信息
    private PackageInfo getPackageInfo(){
        PackageManager manager = getReactApplicationContext().getPackageManager();
        PackageInfo info = null;
        try{
            info = manager.getPackageInfo(getReactApplicationContext().getPackageName(),0);
            return info;
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            return info;
        }
    }
}

RNReactPackage.java

package com.hotapp.rn;//这儿的hotapp换成目录下对应的app名字即可,一般为小写

import com.facebook.react.ReactPackage;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class RNReactPackage implements ReactPackage {


    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();

        //添加一个安卓原生的activity模块
        modules.add(new RNBridgeManager(reactContext));
        return modules;
    }

}

 

在组件里使用

import { Platform, NativeModules } from 'react-native';
const _appVersion = NativeModules.AppVersion;

class App extends Component{
    
    componentDidMount(){
      if (Platform.OS == 'ios') {
         _appVersion.getAppVersion((e, v) => {
           if (!e) {
             console.log("版本号:"+v)
           }
         })
      }else{
         NativeModules.BridgeManager.getAppVersion((v) => {
            if (v) {
              console.log("版本号:"+v)
            }
         });
      }
    }

    render() {
        return (
          
            Welcome to React Native!
          
        )
    }
}

export default App;