兼容 rn 样式

package.json

@@ -47,7 +47,13 @@
     "redux-thunk": "^2.3.0",
     "taro-axios": "^0.5.0",
     "taro-ui": "^2.2.1",
-    "tslib": "^1.8.0"
+    "tslib": "^1.8.0",
+    "@tarojs/components-rn": "^1.3.12",
+    "@tarojs/taro-rn": "^1.3.12",
+    "@tarojs/taro-router-rn": "^1.3.12",
+    "@tarojs/taro-redux-rn": "^1.3.12",
+    "react": "16.3.1",
+    "react-native": "0.55.4"
   },
   "devDependencies": {
     "@tarojs/plugin-babel": "1.3.12",

src/assets/styles/mixins.scss

+/**
+ * 对于部分不兼容的样式，可以通过 mixins 统一处理
+ */
+
+/**
+ * // NOTE Taro 编译成 RN 时对 border 的处理有问题
+ * RN 不支持针对某一边设置 style，即 border-bottom-style 会报错
+ * 那么 border-bottom: 1px 就需要写成如下形式：
+ * border: 0 style color; border-bottom-width: 1px;
+ */
+@mixin border($dir, $width, $style, $color) {
+  border: 0 $style $color;
+
+  @each $d in $dir {
+    #{border-#{$d}-width}: $width;
+  }
+}
+
+/**
+ * 对于不能打包到 RN 的样式，可以用 mixins 引入，相对美观一些
+ */
+@mixin eject($attr, $value) {
+  /* postcss-pxtransform rn eject enable */
+  #{$attr}: $value;
+
+  /* postcss-pxtransform rn eject disable */
+}
+
+/* rn 特定样式 */
+@mixin rn($attr, $value) {
+  /*  #ifdef  %RN%  */
+  #{$attr}: $value;
+
+  /*  #endif  */
+}
+
+/**
+ * // TODO 1px 的线在各端上实现方式不同，统一出来后续再兼容，目前注意两点：
+ * 1. Taro 中大写的 PX 不会被编译成 rpx/em，但 RN 还未兼容该写法
+ * 2. H5 中 1px(转成 rem 后实际小于 0.5px) + border-radius 会导致 border 不显示
+ */
+@mixin hairline($attr) {
+  #{$attr}: 1px;
+
+  @include eject($attr, 1px);
+}
+
+/**
+ * NOTE RN 无法通过 text-overflow 实现省略号，这些代码不能打包到 RN 中
+ */
+@mixin text-ellipsis() {
+  /* postcss-pxtransform rn eject enable */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  /* postcss-pxtransform rn eject disable */
+}
+
+/**
+ * NOTE 实现多行文本省略，RN 用 Text 标签的 numberOfLines，H5/小程序用 -webkit-line-clamp
+ */
+@mixin lamp-clamp($line) {
+  /* postcss-pxtransform rn eject enable */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+
+  /* postcss-pxtransform rn eject disable */
+}

src/assets/styles/reset.scss

+/**
+ * 统一多端基础样式
+ * 比较理想的是 View 标签统一为 display: flex; flex-direction: column
+ * 但是 H5 上内置组件样式可能会错乱，因此暂时不这样处理，有用到 flex 的地方都显式声明主轴方向即可
+ */
+
+/* weapp */
+page {
+  height: 100%;
+}
+
+view,
+text,
+scroll-view {
+  box-sizing: border-box;
+}
+
+button {
+  outline: none;
+
+  &::after {
+    display: none;
+  }
+}
+
+/* h5 */
+
+/* postcss-pxtransform rn eject enable */
+div {
+  box-sizing: border-box;
+}
+
+.taro-text {
+  box-sizing: border-box;
+}
+
+.taro-tabbar__panel,
+.taro_router {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.taro_page {
+  flex: 1;
+}
+
+/* postcss-pxtransform rn eject disable */

src/assets/styles/var.scss

+@import './mixins.scss';
+// @import './'
+
 $bgColor: #f7f7f7;
 $text-color: #323233;
 $input-color: #323233;

src/pages/home/device/add/index.scss

 @import '@styles/var.scss';
 
 .add-device-pin {
+  @include eject(box-sizing, border-box);
+
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
   padding: 20px 40px 0 40px;
 }
 
 .add-device-pin-title {
-  display: block;
+  @include eject(display, block);
 }
 
 .add-device-pin-input {

src/pages/home/tempaltes/conpoments/temp_item/index.scss

+@import '@styles/var.scss';
+
 .temp-item {
   width: 345px;
   margin-bottom: 20px;
 }
 
 .temp-img {
+  @include eject(display, block);
+
   width: 100%;
   height: 185px;
-  display: block;
   background-color: #ccc;
 }
 
 .temp-name {
+  // display: block;
+  @include eject(display, block);
+
   width: 100%;
-  display: block;
   font-size: 28px;
   padding-top: 10px;
   box-sizing: border-box;

src/pages/home/tempaltes/scss/detail.scss

@@ -18,14 +18,12 @@
 }
 
 .film-list-warpper {
-  // padding-top: 20px;
-  // padding-left: 20px;
-  // padding-right: 20px;
   padding: 20px 20px 0 20px;
 }
 
 .film-list-title {
-  display: block;
+  @include eject(display, block);
+
   margin-bottom: 20px;
 }
 

src/pages/home/tempaltes/scss/index.scss

+@import '@styles/var.scss';
+
 .tempaltes {
   width: 100%;
   height: 100%;
@@ -7,12 +9,10 @@
 }
 
 .search-bar {
+  @include eject(box-sizing, border-box);
+
   height: 120px;
-  padding-top: 20px;
-  padding-left: 24px;
-  padding-right: 20px;
-  padding-bottom: 24px;
-  box-sizing: border-box;
+  padding: 20px 24px;
   background-color: white;
 }
 
@@ -39,7 +39,6 @@
   padding-left: 20px;
   padding-right: 20px;
   box-sizing: border-box;
-  // height: calc(100% - 120px);
 }
 
 .list-wrapper {
@@ -47,9 +46,3 @@
   flex-wrap: wrap;
   justify-content: space-between;
 }
-
-// .scroll-view::after {
-//   content: '';
-//   clear: both;
-//   display: block;
-// }