Skip to content

LewinJun/taro-helloword

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 

Repository files navigation

常见问题指南

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

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)

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published