lewinjun / taro-helloword

taro 闭坑指南，常见一些问题汇总

常见问题指南

非常感谢跨平台开源框架，提升人效的前行着。入手多端统一其实对开发者也是比较大的挑战，要做好大前端全栈的准备，需要了解H5，原生小程序，iOS原生，Android原生，有这些的加持写大统一就非常丝滑。 这里总结一些常见问题，希望能帮助到一些人，大家遇到的一些其他坑点也希望能共同维护这个文档，谢谢大家。如果有相关原生或前端的问题也可以提issues(个人是Java和安卓开发出生，后iOS开发好几年再转大前端的)，希望我能够帮助到你，如果能够解决也倍感荣幸。

• ScrollView无法滚动
• 多平台同时调试代码dist目录分割
• 三端统一RN坑盘点
• RNstyle注意点

ScrollView无法滚动

app.less加入如下样式

page {
  height: 100%;
}

SrollView外部用一个View包裹

.scroll-main {
    flex: 1;
    position: "relative";
}
.scroll {
    width: 100%;
    height: 100%;
    position: absolute;
    flex-direction: column;
}
<View className="scroll-main">
    <ScrollView className="scroll"></ScrollView>
</View>

多平台同时调试代码dist目录分割

config/index.js ,js代码可以自己写相应的代码放到想要的目录

outputRoot: 'dist/' + process.env.TARO_ENV,

三端统一RN坑盘点

在样式方面，RN是弱势方，所以在写样式尽量以RN为准，比如不支持css3的新特性，border-style等等。还有一个重点不支持样式嵌套哦，如下：

// RN不支持
.main {
  height: 200px;
  .view {
    width: 200px;
  }
}
// 需要拆分
.main {
  height: 200px;
  
}
.view {
   width: 200px;
}

RNstyle注意点

RN的style某些数值不能写单位px, 如 <View style={{ width: "20px" }}/> RN不支持，如果不写px H5和小程序就不行了，建议使用样式，如果非常情况下自己做个平台判断封装方法

// 比较戳的一个方式，哈哈
export const stylePX = (px: number) => {
    if (process.env.TARO_ENV === 'rn') {
        return px
    }
    return `${px}px`
}

RN不支持border: 1px red solid; 只能border-color: red;这样，因为RN StyleSheet里面不支持，taro仅仅只是把-改成驼峰命名，taro RN推出比较晚，需要慢慢完善，比如background-image, 背景渐变都不支持(可以使用第三方RN组件走原生的方式实现react-native-linear-gradient)