我们如何通过RN实现如图所示的效果:

React Native View组件实例

一:图形分析

1.1:图形分为3列,我们设置flexDirection为“”row”,每个View独占1/3,flex设置为1

1.2:2,3列先把图形均分为上下两部分,填充内容

1.3:给2,3列设置边框

二:代码实现

按照一的分析,实现逻辑如下:

2.1:把布局分为3部分

React Native View组件实例React Native View组件实例

2.2:分别填充内容

React Native View组件实例React Native View组件实例

2.3:添加边框

React Native View组件实例React Native View组件实例React Native View组件实例

下载参考源码

相关文章: