Taro踩坑记之React-Native样式篇

样式管理

样式是实现多端编译的核心挑战,因为 RN 端的样式只是实现了 CSS 的一个子集,具体可参考 React-Native 样式指南

首先因为我是RN开发者,其次RN样式兼容度是最低的,所以我从RN环境出发然后再往各端转,我们首先要搞清楚RN在Taro上如何编写样式。

class 选择器和style共用

普通编写属性使用class 选择器

/* CustomComp.js */
import './index.scss'
export default class CustomComp extends Component {
  render () {
    return 样式
  }
}
/* MyPage.scss */
.red-text {
  color: red;
}

传递属性用style

export default class Index extends Component {
  render () {
    return (
      
        Hello world!
        
        
      
    )
  }
}
export default class CustomView extends Component {

  render () {
    return (
       alert('点击了')}>
        View居然支持RN点击 还是不错的
      
    )
  }
}

转译后的样式

css -> stylesheet 的转换使用的是 css-to-react-native-transform

我们来看一下转译后的样式代码

// customview/index.js
import indexStyleSheet from "./index_styles";
var _styleSheet = indexStyleSheet;
let CustomView = class CustomView extends Component {

  render() {
    return  alert('点击了')}>
        View居然支持RN点击 还是不错的
      ;
  }
};
export { CustomView as default };
//index_styles.js
import { StyleSheet, Dimensions } from 'react-native'

// 一般app 只有竖屏模式,所以可以只获取一次 width
const deviceWidthDp = Dimensions.get('window').width
const uiWidthPx = 375

function scalePx2dp (uiElementPx) {
  return uiElementPx * deviceWidthDp / uiWidthPx
}

export default StyleSheet.create({
  "view_custom": {
    "paddingTop": scalePx2dp(38),
    "paddingRight": scalePx2dp(38),
    "paddingBottom": scalePx2dp(38),
    "paddingLeft": scalePx2dp(38),
    "backgroundColor": "#ff552e"
  }
})

可见Taro应用转译器将className转化为StyleSheet,自动生成了StyleSheet代码,并将它和style拼在一起。

有个疑问:因为rn的style里面不能写'150px'这种格式,默认是dp,那么传入的style不同端该如何控制值的单位呢

未完待续

参考
使用 Taro 编译小程序 + H5 + React Native 的最佳实践

你可能感兴趣的:(Taro踩坑记之React-Native样式篇)