【获取版本号】React Native 通过配置获取Android安卓和iOS版本号

目录：

1. 版本说明
2. 安卓配置内容
3. iOS配置内容
4. 使用方式

一、版本说明

本机系统： Mac
Android studio: 3.6.2
Xcode: 11.4

二、 安卓配置内容， Android 环境，参考这里

2.1、目录下 ${项目名}/android/app/src/main/java/com.项目名/，新增以下两个文件 RNToolsManager.java、 RNToolsPackage.java，并修改文件 MainApplication.java

• 新增文件 RNToolsManager.java，内容如下：

package com.bonehouse_business_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 RNToolsManager extends ReactContextBaseJavaModule {

    public RNToolsManager(ReactApplicationContext reactContext) {

        super(reactContext);

    }

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

    // 声明的方法，外界调用
    @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;
        }
    }
}

• 新增文件 RNToolsPackage.java，内容如下：

package com.bonehouse_business_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 RNToolsPackage implements ReactPackage {


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

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

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

        return modules;
    }

}

• 修改文件 MainApplication.java 新增引用，内容如下：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
        ......
        new RNToolsPackage() /* add */
        ......
  );
}
    

三、iOS 配置内容

3.1、使用 xCode 打开项目，创建 RNToolsManager 类，新建两个文件 RNToolsManager.h 和 RNToolsManager.m

• 新增文件 RNToolsManager.h 内容如下：

//
//  RNToolsManager.h
//  Copyright © 2021 Facebook. All rights reserved.
//

#ifndef RNToolsManager_h
#define RNToolsManager_h


#endif /* RNToolsManager_h */

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RNToolsManager : NSObject <RCTBridgeModule>

@end

• 新增文件 RNToolsManager.m 内容如下：

//
//  RNToolsManager.m
//  Copyright © 2021 Facebook. All rights reserved.
//

#import <Foundation/Foundation.h>

#import "RNToolsManager.h"
@implementation RNToolsManager

@synthesize bridge = _bridge;

RCT_EXPORT_MODULE(RNToolsManager);
//  对外提供调用方法,Callback
RCT_EXPORT_METHOD(getAppVersion:(RCTResponseSenderBlock)callback)
{
  NSString *version = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVersionString"];//获取项目版本号
  callback(@[[NSString stringWithFormat:@"%@",version]]);
}

@end

• 具体如下图：

---

---

四、使用方式

4.1、组件中获取版本号如下：

import React, {Component} from 'react';
import { NativeModules, View, Text, ...} from 'react-native';

export default class TestPage extends Component{
    constructor(props) {
        super(props)
        this.state = {
            version_apk: '', // 版本号
            ...
        }
    }
    
    componentDidMount() {
        this.setVersion()
    }     
    
    // 设置版本号
    setVersion() {
        NativeModules.RNToolsManager.getAppVersion((event)=>{
            this.setState({
                version_apk: event
            })
        })
    }
    
    
    
    render() {
        let { version_apk } = this.state
        return (
            <View>
              <Text>版本号：</Text>
              <Text>{version_apk}</Text>
            </View>
        
        
}

4.2、 运行即可看到效果 ✌️

写给自己的随笔，有问题欢迎指出