Я наложил прокрутку на все мое представление, чтобы клавиатура не могла перемещать элементы страницы.
Итак, это результат с прокруткой и без прокрутки:
Без Scrollview
С Scrollview
Это работает, но теперь у меня возникла новая проблема. Мой текст «У вас еще нет аккаунта? Регистрация» должен быть внизу экрана.
Что у меня есть:
У меня есть
Что я хочу:
Я хочу
Я бы знал, как разместить мой вид внизу моего прокрутки.
Мой 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',
}, контейнер : {flex: 1, justifyContent: 'center', alignItems: 'center'
},
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'
}
});
У кого-то есть решение? Спасибо!