React Native实现按钮定位页面底部

2021-06-04 16:35:48 阅读：359 来源： 互联网

标签：flex Native ScrollView React fontSize backgroundColor 按钮 btn 页面

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

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

效果如图：

话不多说，直接上代码

           <SafeAreaView style={{ flex: 1 }}>
                <ScrollView style={style.container}>
                   
                </ScrollView>
                {/* 按钮 */}
                <View style={style.btn_bg}>
                    <TouchableOpacity onPress={() => {

                    }}>
                        <View style={style.btn_blue}>
                            <Text style={style.btn}>确定</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>

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中最后内容即可

标签：flex,Native,ScrollView,React,fontSize,backgroundColor,按钮,btn,页面
来源： https://www.cnblogs.com/lijianyi/p/14850138.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React Native实现按钮定位页面底部