fix: adjusting tablet phone styles (#14946)

packages/taro-runtime-rn/package.json

@@ -27,9 +27,13 @@
   "dependencies": {
     "@tarojs/components-rn": "workspace:*",
     "@tarojs/router-rn": "workspace:*",
+    "react-native-device-info": "~10.3.0",
     "react-native-root-siblings": "^4.1.1"
   },
   "devDependencies": {
     "@types/react-native": "^0.69.8"
+  },
+  "peerDependencies": {
+    "react-native-device-info": "~10.3.0"
   }
 }

packages/taro-runtime-rn/src/compute.ts

@@ -1,4 +1,5 @@
 import { Dimensions } from 'react-native'
+import DeviceInfo from 'react-native-device-info'
 
 import { isFunction } from './utils'
 
@@ -12,9 +13,14 @@ const defaultRadio = {
   828: 1.81 / 2
 }
 
+let uiWidthPx = 375
+
+if (DeviceInfo.isTablet()) {
+  uiWidthPx = 750
+}
+
 export function pxTransform (size: number): number {
   const deviceWidthDp = Dimensions.get('window').width
-  const uiWidthPx = 375
   const config: AppConfig = globalAny.__taroAppConfig?.appConfig || {}
   const deviceRatio = config.deviceRatio || defaultRadio
   const designWidth = (((input = 0) => isFunction(config.designWidth)

packages/taro-runtime-rn/src/scale2dp.tsx

@@ -1,14 +1,13 @@
-import { Dimensions, Platform } from 'react-native'
+import { Dimensions } from 'react-native'
+import DeviceInfo from 'react-native-device-info'
 
 // 一般app 只有竖屏模式，所以可以只获取一次 width
 const deviceWidthDp = Dimensions.get('window').width
 const deviceHeightDp = Dimensions.get('window').height
 let uiWidthPx = 375
 
-if (Platform.OS === 'ios') {
-  if (Platform.isPad) {
-    uiWidthPx = 750
-  }
+if (DeviceInfo.isTablet()) {
+  uiWidthPx = 750
 }
 
 export function scalePx2dp (uiElementPx) {