将视图定位在底部（粘滞页脚），React Native答案

【问题标题】：Position View at the bottom (Sticky Footer), React Native将视图定位在底部（粘滞页脚），React Native
【发布时间】：2018-06-21 03:19:37
【问题描述】：

我有这个组件：

    render() {
    return (
        <ScrollView style={styles.container}>
            <View style={styles.body}>
                <View style={styles.LogoContainer}>
                    <Image resizeMode="contain" style={styles.logo} source={require('../../images/logo.png')}/>
                </View>
                <View style={styles.bottomContainer}>
                    <TextInput selectionColor="white" placeholderTextColor="white" placeholder="Email" style={styles.input} underlineColorAndroid='transparent'/>
                    <TextInput selectionColor="white" placeholderTextColor="white" secureTextEntry={true} placeholder="Password" style={styles.input} underlineColorAndroid='transparent'/>
                    <TouchableOpacity onPress={() => {}} style={styles.btn}>
                        <Text style={styles.btnTxt}>LOG IN</Text>
                    </TouchableOpacity>
                </View>
            </View>
            <View style={styles.footer}>
                <TouchableOpacity onPress={() => {}}>
                    <Text style={[styles.footerTxt, {color: '#fff'}]}>Don’t have an account?</Text>
                </TouchableOpacity>
            </View>
        </ScrollView>
    )
}

我想要的是用style={styles.footer}（粘滞页脚）定位最新视图。我试图设置position: "absolute, bottom:0"，但没有工作。父容器 (ScrollView) 有 height:"100%" 和 position:"relative"，如果这对 React Native 来说很重要。

【问题讨论】：

“不被修复”是什么意思？您的问题需要进一步解释。
嗨，我的意思是底部不是position:fixed。不粘页脚。
关心绘制您想要的布局吗？我还是不知道你想要什么。
你也需要提供你的风格。 “粘性页脚”通常意味着“即使内容较小，也位于视口底部，但内容较大时下推”，这对您意味着什么？
我的意思是，如果您像其他元素一样滚动页脚，并且如果所有内容的总和小于屏幕高度，则页脚位于底部。

标签： react-native flexbox react-native-flexbox flexboxgrid

【解决方案1】：

我找到了这种方式。首先删除<View style={styles.body}> 元素并将contentContainerStyle 添加到ScrollView，如下所示：

render() {
return (
        <ScrollView contentContainerStyle={styles.container}>
            <View style={styles.LogoContainer}>
                <Image resizeMode="contain" style={styles.logo} source={require('../../images/logo.png')}/>
            </View>
            <View style={styles.bottomContainer}>
                <TextInput selectionColor="white" placeholderTextColor="white" placeholder="Email" style={styles.input} underlineColorAndroid='transparent'/>
                <TextInput selectionColor="white" placeholderTextColor="white" secureTextEntry={true} placeholder="Password" style={styles.input} underlineColorAndroid='transparent'/>
                <TouchableOpacity onPress={() => {}} style={styles.btn}>
                    <Text style={styles.btnTxt}>LOG IN</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.footer}>
                <TouchableOpacity onPress={() => {}}>
                    <Text style={[styles.footerTxt, {color: '#fff'}]}>Don’t have an account?</Text>
                </TouchableOpacity>
            </View>
        </ScrollView>
      )
}

接下来将这些样式添加到ScrollView:

const styles = StyleSheet.create({
container:{
   flex: 1,
   justifyContent: 'space-between',
}, ....

如果需要，可以将height 添加到ScrollView > View。

【讨论】：