taro icon indicating copy to clipboard operation
taro copied to clipboard

目前使用Taro创建的React-Native的模板,在行内样式中写fontSIze时不支持单位,例如style={{fontSize: '20px'}},这种情况会报错,只能写style={{fontSize: 20}},希望能所有端侧都保持一致的写法即:style={{fontSize: '20px'}},从而达到各端侧开发体验一致

Open WhiteSean opened this issue 3 years ago • 7 comments

这个特性解决了什么问题?

解决各端则在写行内样式fontSize具有一致的开发体验

这个 API 长什么样?

期望在RN侧也能支持style={{fontSize: '20px'}}

WhiteSean avatar Jan 06 '22 13:01 WhiteSean

其实使用 Taro.pxTransform 就可以达成全端一致的开发体验(毕竟直接写 20px 最后多端适配更是一个难题

function () {
  return <View style={{ fontSize: Taro.pxTransform(20) }} />
}

ZakaryCode avatar Jan 06 '22 13:01 ZakaryCode

https://docs.taro.zone/docs/size#api

zhiqingchen avatar Jan 07 '22 02:01 zhiqingchen

@shinken008 怎么看

zhiqingchen avatar Jan 07 '22 06:01 zhiqingchen

实际上使用Taro.pxTransform就可以实现全端适配的开发体验(触发20px最后直接写多端适配一个难题

function  ( )  { 
  return  < View  style = { {  fontSize : Taro . pxTransform ( 20 )  } }  / > 
}

这样的话是可以解决问题,但是从开发体验角度来说,不得不去给他加上这样的API,和平时开发写font-size的习惯冲突。为了保持多端统一,甚至我需要在H5,小程序侧必须也这样写,这样显得有点鸡肋。我想的是,既然有了这样的API,那就有这样的转化能力,无非就是把这个能力在运行时让开发者无感知的处理。我觉得这样比较好,让开发者使用web端的开发习惯开发各端。不知道我想的是否正确。

WhiteSean avatar Jan 07 '22 06:01 WhiteSean

实际上使用Taro.pxTransform就可以实现全端适配的开发体验(触发20px最后直接写多端适配一个难题

function  ( )  { 
  return  < View  style = { {  fontSize : Taro . pxTransform ( 20 )  } }  / > 
}

这样的话是可以解决问题,但是从开发体验角度来说,不得不去给他加上这样的API,和平时开发写font-size的习惯冲突。为了保持多端统一,甚至我需要在H5,小程序侧必须也这样写,这样显得有点鸡肋。我想的是,既然有了这样的API,那就有这样的转化能力,无非就是把这个能力在运行时让开发者无感知的处理。我觉得这样比较好,让开发者使用web端的开发习惯开发各端。不知道我想的是否正确。

个人觉得是不错的想法,可以把对样式文件的尺寸处理,同步到对 style 的处理中。但是处理起来会比较复杂,需要设计。

zhiqingchen avatar Jan 10 '22 02:01 zhiqingchen

最好是改用 Taro. pxTransform 的,RN下没有px/rpx这类单位

tourze avatar Jan 10 '22 06:01 tourze

这样的话是可以解决问题,但是从开发体验角度来说,不得不去给他加上这样的API,和平时开发写font-size的习惯冲突。为了保持多端统一,甚至我需要在H5,小程序侧必须也这样写,这样显得有点鸡肋。我想的是,既然有了这样的API,那就有这样的转化能力,无非就是把这个能力在运行时让开发者无感知的处理。我觉得这样比较好,让开发者使用web端的开发习惯开发各端。不知道我想的是否正确。

其实小程序端和 Web 端本来也需要这样写,不使用 API 是没办法完成单位转换的 😂 无感知是一个很好的想法,但是达成无感知之后,依旧需要给开发者可选是否转换的方法,这里实现成本和实际开发体验需要评估一下

ZakaryCode avatar Jan 27 '22 05:01 ZakaryCode