王学岗ReactNative开发11——ReactNative屏幕适配与热更新技术详解

第一：屏幕适配
ReactNative既要和android进行屏幕适配又要和ios屏幕适配；用到的比较多的还是代码适配。另外字体也需要适配
适配类

import {
    Dimensions,
    Platform,
    PixelRatio
} from 'react-native';
//计算当前的宽高
const
screenW = Dimensions.get("window").width;
const
screenH = Dimensions.get('window').height;
//1，默认  1
//2，默认字体为当前手机字体；用户可以设置字体大小，我们得到的这个值就是用户设置的字体
const fontScale = PixelRatio.getFontScale();
//长度 1  单位    dpi
//像素
const pixelRatio = PixelRatio.get();

//基础屏幕属性 美工会给一个屏幕适配的标准，比如android的标准就是宽1080高1920
// const  defaultWidth=1080;
// const defautHeight = 1920;
//计算  iPhonex  iphone6
//基础屏幕属性 美工会给一个屏幕适配的标准，比如苹果的标准就是宽375高667
const  defaultWidth=375;
const  defautHeight = 667;
//缩放系数
const _scaleWidth = screenW / defaultWidth;
const _scaleHeight = screenH / defautHeight;

// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;
export default class ScreenUtil {
    //传入的是美工设计的值
    static scaleWidth(size) {
        return size * _scaleWidth;
    }

    static
    scaleHeight(size) {
        return size * _scaleHeight;
    }

//字体  始终保持长宽1:1的比例
    static setScakeText(size) {
        //当前宽度和高度的缩放系数哪个最小
        const scale = Math.min(_scaleWidth, _scaleHeight);
        return size * scale;
    }
    //刘海屏
    static
    isIphoneX() {

        return(
            Platform.OS === 'ios' &&
            ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
                (screenH === X_WIDTH && screenW === X_HEIGHT))
        )
    }

}

第二：热更新技术

1，RN打包流程：首先.js文件先打包成Bundle文件，bundle文件在放到apk里的asset目录，最后和原生打包就一样了，最后生成apk。
2，生成bundle文件的打包命令：
在android studio 的Terminal中,来到项目(RN的项目，不是RN项目中的android项目)的根目录下，

输入打包命令，发现生成了index.bundle文件；
假设这个bundle是一个老版本，。接着我们随便修改下代码，打包一个新的bundle包。我们借助diff_match_patch工具生成一个差分包;这个工具是一个java类，我们要自己写代码；这是它的用法

运行后会生成.pat文件，这个文件就是我们两个bundle的差异。我们把这个.pat文件放到服务器上。
用户手机上会有旧的bundle文件，我们下载了这个.pat文件，然后合并。就是修改旧的bundle文件，使之和新的bundle文件一致。