我有这个组件:
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有此问题。
答案 0 :(得分: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
。