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

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

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

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

效果如图：

 

 

话不多说，直接上代码

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