多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 抖音样式的底部导航栏 默认情况下底部导航栏的样子为: ![](https://img.kancloud.cn/f2/ba/f2ba8da9a61826b7c907d6c659f86560_646x98.png) 我们要实现抖音的样子: ![](https://img.kancloud.cn/2c/dd/2cdd274f0667347eb5b43a3dcb0ce228_722x122.png) 实现思路有两个: 1. 可以完全自定义 2. 在原来的基础上修改样式 ## 实现基本样式 可以通过配置实现基本的样式: ![](https://img.kancloud.cn/83/89/8389746457bb5fd6a52331bd627f052d_2216x1576.png) ## 实现中间的按钮 实现思路:制作一个按钮,使用定位技术,定位到中间。 ![](https://img.kancloud.cn/4c/53/4c53c1df4ff401224fd3d35a02233ec3_2196x1704.png) ## 按钮平均分布 因为底部有四个按钮,所以中间放一个+号按钮时,按钮不平均, 解决办法:底部导航栏 中再添加一个按钮,让它是五个按钮,这样就平均了 ![](https://img.kancloud.cn/71/4c/714c31a8ea007cfda82c6b676b65d122_2214x1576.png) 缺点:1. 底部导航栏中多出了一个没有用的按钮 2. 点击+号旁边时有可能点击到底下的按钮 # 实现录像功能 点击 + 号时可以实现录像、拍照功能,这个功能可以通过 `react-native-image-crop-picker` 包实现,这个包已经安装过了,直接使用即可。 1. 引入这个包 ~~~ import ImagePicker from 'react-native-image-crop-picker'; ~~~ 2. 为 + 号添加点击事件 ![](https://img.kancloud.cn/83/f0/83f0e23e00e7a7ba1d897661bd795637_874x520.png)