首页 文章

位置视图底部（粘滞页脚），反应原生

提问于
浏览 次
0

我有这个组件：

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" ，但没有工作 . 如果React Native有此问题，则父容器（ ScrollView ）具有 height:"100%" 和 position:"relative" .

react-native flexbox react-native-flexbox flexboxgrid

1 回答

  • 0

    我找到了这种方式 . 首先删除 <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 .

    回复于

相关问题