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