我已在所有视图上放置了一个滚动视图,以防止键盘移动页面元素。
因此,这是带有滚动视图且没有滚动视图的结果:
可以,但是现在我遇到了一个新问题。我的文本“还没有帐户?注册”应该位于屏幕底部。
我有什么:
我想要什么:
我会知道如何将视图置于滚动视图的底部。
此视图的我的CSS:
signupTextCont: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
paddingVertical: 16,
flexDirection: 'row',
},
此行:alignItems:'flex-end'
通常,应该将文本放在屏幕底部,但由于我有滚动视图,所以他不会位于屏幕底部。我应该怎么做?
渲染器:
<ScrollView style={styles.main_container}>
<View style={styles.container} >
<Text>{'\n'}</Text>
<View style={styles.container}>
<TextInput style={styles.inputBox}
onChangeText={(email) => this.setState({email})}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Email"
placeholderTextColor = "#002f6c"
selectionColor="#fff"
keyboardType="email-address"
onSubmitEditing={()=> this.password.focus()}/>
<TextInput style={styles.inputBox}
onChangeText={(password) => this.setState({password})}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
secureTextEntry={true}
placeholderTextColor = "#002f6c"
ref={(input) => this.password = input}
/>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText} onPress={this.saveData}>{this.props.type}Login</Text>
</TouchableOpacity>
</View>
<View
style={{
borderBottomColor: 'gray',
borderBottomWidth: 1,
alignSelf:'stretch',
width: Dimensions.get('window').width-30,
backgroundColor: 'rgba(164, 164, 164, 0.44)',
marginBottom:10,
marginLeft:10,
marginRight:10
}}
/>
<Text
style={{
marginBottom:10
}}
>or</Text>
<LoginButton
publishPermissions={["publish_actions"]}
readPermissions={['public_profile', 'email', 'user_friends']}
onLoginFinished={
(error, result) => {
if (error) {
console.log("login has error: " + result.error);
} else if (result.isCancelled) {
console.log("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then((data) => {
// Permet d'appeler la fonction _responseInfoCallback pour récupérer les informations demandé à l'api de facebook.
const infoRequest = new GraphRequest(
'/me?fields=email,name,picture',
null,
this._responseInfoCallback
);
// Start the graph request.
new GraphRequestManager().addRequest(infoRequest).start();
}
)
}
}
}
onLogoutFinished={() => console.log("logout.")}/>
<View style={styles.signupTextCont}>
<TouchableOpacity onPress={this._signup}><Text style={styles.signupButton}>Dont have an account yet? Signup </Text></TouchableOpacity>
</View>
</View >
</ScrollView>
);
} }
Css:
const styles = StyleSheet.create({
main_container: {
flexGrow:1,
backgroundColor: 'white',
}, 容器: { 弹性:1, justifyContent:“中心”, alignItems:'中心'
},
signupTextCont: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
paddingVertical: 16,
flexDirection: 'row',
},
signupText: {
color: '#12799f',
fontSize:16,
},
signupButton: {
color: '#12799f',
fontSize:16,
fontWeight: '500',
},
inputBox: {
width: 300,
backgroundColor: '#eeeeee',
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color: '#002f6c',
marginVertical: 10
},
button: {
width: 300,
backgroundColor: '#4f83cc',
borderRadius: 25,
marginVertical: 10,
paddingVertical: 12
},
buttonText: {
fontSize: 16,
fontWeight: '500',
color: '#ffffff',
textAlign: 'center'
}
});
有人有解决方案吗?谢谢!
答案 0 :(得分:0)
您可以将除注册外的其他代码包装到View中,并将'space-between'设置为容器样式。
<View style={styles.container}>
<View>
<Text>{'\n'}</Text>
...
onLogoutFinished={() => console.log("logout.")}/>
</View>
<View style={styles.signupTextCont}>
<TouchableOpacity onPress={this._signup}><Text style={styles.signupButton}>Dont have an account yet? Signup </Text></TouchableOpacity>
</View>
</View>
container: {
justifyContent: 'space-between'
}
(you can check 'space-around or 'space-evenly' and you can use anyone if you want.)