尝试用React Native做了个9宫格组件，作为新人谈谈对Native的看法

Posted 2021-03-10 kobako-

前两天开始接触React Native。

因为之前了解过相关的跨平台解决方案，比如Ionic之类的，相比起来，React Native最突出的地方有两点：

1. 使用Expo解决了对android Studio / ios开发工具的依赖

2. 在端末上实现热重载

其中的第一点不知道将多少尝试进入安卓开发舞台的人挡在了门外。

而第二点极大加快了端末APP开发的迭代速度。

---

实际开发中，CSS大部分的特性都有，基本上CSS能实现的效果在Native上也可以实现。

随时准备一个Cheat Sheet就能解决大部分的问题。

开发这个组件，没有用Flexbox，主要用了百分比

其实这样一句话就可以概括整个组件了。。

不过似乎百分比是后来才加入的特性，也就是说一开始是不支持的

有些好奇以前人们是怎么实现这些效果的

---

效果如图：

宽屏上的显示则是：

通过传入cols选项就能改变一行显示的格子数量

---

配置项包括:

1. cols: 一行显示的格子数
2. height: 图片的宽和高(没错，只能是正方形)
3. imgSrcs: [‘url1‘, ‘url2‘, ‘url3‘]
4. titles: [‘title1‘, ‘title2‘, ‘title3‘]
5. paddingBetweenRows: 两行的间距
6. callbacks: [() => {console.log(‘Callback of first image‘)}]

---

Github地址: https://github.com/zhuobinggang/react-native-grid-configurable
以上，有兴趣的点个star吧(目的)