开始前先说点什么
开始使用React Native后你会很快发现,在其组件库中找不到一个好用的按钮。虽然,在最近的更新中已经出现了一个Button
组件,但是这个Button
的外观在Adroid和iOS系统下的外观截然不同(见下图),所以这就使得做一个按钮变得非常重要。虽然有很多第三方的包都有按钮,但是即使是为了理解React Native的工作原理,自己做一个按钮也是非常有必要的。
本教程使用Expo Snack制作,这是一款非常好用的工具,可以让你在线调试React Native,并且还预装了一些常用的库。项目完成效果请见https://snack.expo.io/Sy7Utsv-W, 如果登陆有问题则可能需要翻墙。
从结果出发思考需求
使用React的一大优势就是他基于组件的设计,可以开发一次然后随处使用。所以我们首先要做的是从使用者的角度思考,这个组件应该具有哪些KPI,然后再考虑如何实现。这可以称为Wish-Driven Design(基于想象的设计)。
假设我们要做后图中的按钮,那么我希望只需要写一样代码,这里所有的颜色和样式都是默认的:
<Button tag="Press Me" onPress={this.onPress}/>
但是同时,我