React Native使用flex：1实现按钮定位页面底部-白红宇的个人博客

React Native使用flex：1实现按钮定位页面底部

发布日期：2022-04-05 00:52:17 浏览次数：3 分类：博客文章

本文共 1050 字，大约阅读时间需要 3 分钟。

项目中我们经常会遇到一种情况就是，我的核心内容展示很长（用ScrollView实现），但是按钮要定位在屏幕底部，那么此时我们如何实现呢？

其实很简单，只要除了按钮位置都留给ScrollView即可，用flex:1即可实现,

因为flex：1默认会优先展示兄弟组件，然后才会自己填充满父组件剩余部分。

效果如图：

话不多说，直接上代码


                    
                                        
                     {/* 按钮 */}                
                         
      
        {                    }}>                        
                                   
        
         确定

const style = StyleSheet.create({    container: {        backgroundColor: ThemeAheadGlobal.colorBaseBackCommon,        flex: 1,    },    btn_bg: {        backgroundColor: '#FFFFFFCC',        paddingHorizontal: 15,        paddingVertical: 8,    },    btn_blue: {        backgroundColor: '#3480FF',        height: 40,        borderRadius: 20,        justifyContent: 'center',    },    btn: {        fontSize: DeviceHelp.fontSize(16),        color: '#FFFFFF',        textAlign: 'center',    },})

备注：

如果按钮需要跟随页面滚动，直接设置为ScrollView中最后内容即可

转载地址：https://www.cnblogs.com/lijianyi/p/14850138.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：React Native组件左右两端展示(flex:1、justifyContent:'space-between')

下一篇：iOS 蓝牙开发详解（基本知识、相关类图、交互流程）

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章