.less/scss文件书写px单位报错

crise1993 commented 1 month ago

复现步骤

1、下载https://github.com/crise1993/taro-rn-less代码之后 2、yarn install之后，运行yarn dev:rn命令 3、在index.less文件中加入font-size: 50px;会报错

期望结果

px能在rn环境中正确转换不会报错

实际结果

ERROR Error: react-native-device-info: NativeModule.RNDeviceInfo is null. To fix this issue try these steps: • For react-native <= 0.59: Run react-native link react-native-device-info in the project root. • Rebuild and re-run the app. • If you are using CocoaPods on iOS, run pod install in the ios directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods. If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-device-info/react-native-device-info, js engine: hermes at Test (http://10.112.98.200:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.ganji.android.haoche&modulesOnly=false&runModule=true:125313:41) at RCTView at View at _View (http://10.112.98.200:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.ganji.android.haoche&modulesOnly=false&runModule=true:125017:47) at Index (http://10.112.98.200:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.ganji.android.haoche&modulesOnly=false&runModule=true:124947:76) at PageProvider (http://10.112.98.200:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.ganji.android.haoche&modulesOnly=false&runModule=true:109525:36) at RCTView at View at RCTScrollView at ScrollView

环境信息

Taro v3.6.30

  Taro CLI 3.6.30 environment info:
    System:
      OS: macOS 14.6
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.4/bin/yarn
      npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.30 => 3.6.30 
      @tarojs/components: 3.6.30 => 3.6.30 
      @tarojs/helper: 3.6.30 => 3.6.30 
      @tarojs/plugin-framework-react: 3.6.30 => 3.6.30 
      @tarojs/plugin-platform-alipay: 3.6.30 => 3.6.30 
      @tarojs/plugin-platform-h5: 3.6.30 => 3.6.30 
      @tarojs/plugin-platform-jd: 3.6.30 => 3.6.30 
      @tarojs/plugin-platform-qq: 3.6.30 => 3.6.30 
      @tarojs/plugin-platform-swan: 3.6.30 => 3.6.30 
      @tarojs/plugin-platform-tt: 3.6.30 => 3.6.30 
      @tarojs/plugin-platform-weapp: 3.6.30 => 3.6.30 
      @tarojs/react: 3.6.30 => 3.6.30 
      @tarojs/rn-runner: 3.6.30 => 3.6.30 
      @tarojs/rn-supporter: 3.6.30 => 3.6.30 
      @tarojs/runtime: 3.6.30 => 3.6.30 
      @tarojs/runtime-rn: 3.6.30 => 3.6.30 
      @tarojs/shared: 3.6.30 => 3.6.30 
      @tarojs/taro: 3.6.30 => 3.6.30 
      @tarojs/taro-loader: 3.6.30 => 3.6.30 
      @tarojs/taro-rn: 3.6.30 => 3.6.30 
      @tarojs/webpack5-runner: 3.6.30 => 3.6.30 
      babel-preset-taro: 3.6.30 => 3.6.30 
      eslint-config-taro: 3.6.30 => 3.6.30 
      react: ^18.1.0 => 18.3.1 
      react-native: ^0.70.1 => 0.70.15

补充信息

试着升级和降级@tarojs/rn-style-transformer多个版本，都不好使。顺便说一句： Taro.pxTransform在rn里面也不好使

crise1993 commented 1 month ago

https://github.com/NervJS/taro/blob/main/packages/taro-runtime-rn/src/scale2dp.tsx 看起来是这块导致报错

lsycxyj commented 5 days ago

同样问题+1，RN0.73（taro 4.0.7），翻了好些资料，我用安卓端调连报错是哪里都没打出来…推断原因是升级后expo依赖对不上号，只要引用react-native-device-info就会报错。需要修改scalePx2dp等引用到react-native-device-info的实现，对于expo ~50，依赖改为"expo-device": "^5.9.4"，同时scalePx2dp的实现需改成类似如下：

import { Dimensions } from 'react-native';
// import DeviceInfo from 'react-native-device-info';
import { deviceType, DeviceType } from 'expo-device';
// 一般app 只有竖屏模式，所以可以只获取一次 width
const deviceWidthDp = Dimensions.get('window').width;
const deviceHeightDp = Dimensions.get('window').height;
let uiWidthPx = 375;
// if (DeviceInfo.isTablet()) {
//     uiWidthPx = 750;
// }
if (deviceType === DeviceType.TABLET) {
    uiWidthPx = 750;
}

不知道是否能采纳 @TheKonka

PS：RN和taro群加满了…哪里有渠道可以加进去…

NervJS / taro