其他分享
首页 > 其他分享> > React Native实现按钮定位页面底部

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

作者:互联网

项目中我们经常会遇到一种情况就是,我的核心内容展示很长(用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