样式上RN 最弱，所以要以 RN 的约束来管理样式，同时兼顾小程序的限制

0 动态修改样式

统一使用classnames库，进行样式动态的添加和删除，可以兼容各端

<Text
    className={classNames('list__item-btm-usrInfo-flow',
                         item.followed && 'list__item-btm-usrInfo-flow--active')}
  onClick={this.onFollowClick.bind(this, index)}
>{item.followed ? '已关注' : '关注'}</Text>

1 RN端只支持 Flex 布局

暂时无解，因此工程布局必须全部使用flex布局

2 RN端只支持类选择器

仅支持css的类选择器，其他所有css选择器一律不支持
不过可以充分利用scss的’&’父选择器标识符来大幅简化css命名的长度

.searchBar{
  &__rightWrap{
    display: flex;
    height: 70px;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    &-btn{
      font-size: 20px;
      line-height: 20px;
      color: #333333;
    }
  }
}

以上可直接在jsx标签中使用这三个样式：’searchBar’,’searchBarrightWrap’,’searchBarrightWrap-btn’

3 统一类名的书写规范

由于只能使用类选择器，如何管理大量的类名就很重要
工程样式类名统一遵循BEM规范
block__element-childElement—modifier

4 指定平台样式的条件编译

4.1 样式文件条件编译

• index.scss
  - index.rn.scss
  平台会自动找到并引用对应后缀的样式文件，适用于页面有大面积样式不兼容的情况

  4.2 样式代码条件编译

  .read{
          font-size: 18px;
      /*  #ifdef  rn  */  RN端保留的样式
      font-size: 22px;
      /*  #endif  */
          /*  #ifndef  rn  */  RN端剔除的样式
      white-space:nowrap;
      text-overflow:ellipsis;
      /*  #endif  */
  }

  5 RN端不支持background-image

  使用position:realtive/absolute 配合标签

  6 RN端不支持border-xxx的简写

  不支持简写如border-top等，但是原始拆开的写法是支持的，因此使用scss定义一个mixin统一处理：

  @mixin border($dir, $width, $style, $color) {
  border: 0 $style $color;
  @each $d in $dir {
    #{border-#{$d}-width}: $width;
  }
  }

  使用时：

  .item-footer {
  display: flex;
  flex-direction: row;
  height: 100%;
  background: #faf9fa;
  @include border(top, 1px, solid, $border-color);
  }

  7 h5端的1px的圆角边框不显示

  h5中的1px转成rem后小于0.5px，如果此时同时存在border-radius样式，则导致边框不显示，解决方案：
  定义mixin,把h5的1px全部写成1PX,此时px就不会被转成rem，而是继续保持px单位，就可以显示了 ```css @mixin hairline($attr) {

  {$attr}: 1px;

  @include eject($attr, 1PX);//RN端不支持PX，因此要剔除 }

@mixin eject($attr, $value) { /postcss-pxtransform rn eject enable/

{$attr}: $value;

/postcss-pxtransform rn eject disable/ }

<a name="gUEW5"></a>
## 8 文本超出限制显示省略号
RN端：<Text numberOfLines={1} style={styles.previewText}>{preview}</Text><br />H5/小程序端： -webkit-line-clamp
```css
@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*/
}

9 RN端不支持display:none

设置height为0迂回实现

10 RN端不支持position:fixed

父容器相对布局，需要固定的组件绝对布局，固定其位置，需要滑动的组件使用组件，并提前计算好高度

11 获取屏幕剩余可用高度

抽取工具方法

/**
showTabBar 是否使用了默认标题栏
fixPx 固定部分已占用的高度
/*
export function getWindowHeight(showTabBar = true,fixPx = 0) {
  const info = Taro.getSystemInfoSync()
  const { windowHeight, statusBarHeight, titleBarHeight } = info
  const tabBarHeight = showTabBar ? TAB_BAR_HEIGHT : 0
  if (process.env.TARO_ENV === 'rn') {
    return windowHeight - statusBarHeight - NAVIGATOR_HEIGHT - tabBarHeight - fixPx/2
  }
  if (process.env.TARO_ENV === 'h5') {
    return `${windowHeight - tabBarHeight - fixPx/2}px`
  }
  if (process.env.TARO_ENV === 'alipay') {
    // NOTE 支付宝比较迷，windowHeight 似乎是去掉了 tabBar 高度，但无 tab 页跟 tab 页返回高度是一样的
    return `${windowHeight - statusBarHeight - titleBarHeight + (showTabBar ? 0 : TAB_BAR_HEIGHT) - topPx/2}px`
  }
  return `${windowHeight - fixPx/2}px`
}

12 RN不支持标签样式

但是支持样式变量的写法：

13 不支持float浮动

使用flex布局迂回实现

14 隐藏各端的默认标题栏

入口文件修改窗口配置，样式改为costom，即可自定义标题栏

config = {
    window: {
        navigationStyle:'custom'
    }
}

15 RN不支持渐变色

可以针对RN端引入额外的渐变色支持库，自己没有尝试，目前最简单的解决方案是美工切图

16 RN不支持通过Image的border-radius来实现圆形

给图片加一个View标签容器包裹，RN支持设置View的border-radius来实现圆形，保证内部图片尺寸和外部蒙层一致，即可实现圆形图片效果

其他RN不支持的样式

*{}通配符，厂商前缀：-webkit-,text-overflow,normal 或 bold 之外的 font-weight,filter,white-space,text-overflow,box-shadow……太多了
凡是RN的样式规范里没有的，都不支持
需要见招拆招