第一:屏幕适配
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文件一致。