我正在使用本机和世博会开发应用程序,我在Android上遇到了键盘问题。当键盘弹出时,它会将视图向上推得太多,导致标题在中间被剪切。在iOS上它很好。我想达到同样的行为..
我查看了文档,但它说Android会自动处理它。但它没有这样做:/
这是我的代码:
render() {
const { erroLogin, logando } = this.props;
return (
<ImageBackground style={styles.container} source={backgroundImage}>
<KeyboardAvoidingView
style={styles.keyboardViewContainer}
behavior={Platform.OS === 'ios' ? 'padding' : null}
>
<Text
style={{
fontFamily: 'roboto-bold',
color: '#ffffff',
fontSize: 48,
marginBottom: 20.7 * 3,
}}
>
Balad<Text style={{ fontFamily: 'roboto-light', color: '#ffffff', fontSize: 48 }}>APP</Text>
</Text>
<TextInput
value={this.state.email}
placeholder="Usuário"
style={[styles.input, { marginBottom: 4 * 3 }]}
placeholderTextColor="#828282"
maxLength={255}
autoCorrect={false}
keyboardType="email-address"
autoCapitalize="none"
returnKeyType="done"
underlineColorAndroid="transparent"
onChangeText={text => this.setState({ email: text })}
/>
<TextInput
value={this.state.senha}
placeholder="Senha"
style={styles.input}
placeholderTextColor="#828282"
maxLength={255}
autoCorrect={false}
autoCapitalize="none"
returnKeyType="done"
secureTextEntry
underlineColorAndroid="transparent"
onChangeText={text => this.setState({ senha: text })}
/>
<View style={styles.esqueceuView}>
<TouchableOpacity onPress={this.esqueciMinhaSenha}>
<Text style={styles.esqueceuSenha}>Esqueceu a senha?</Text>
</TouchableOpacity>
</View>
<CustomCheckBox style={styles.continuarConectadoView} onValueChange={this.switch} value={this.state.continuarConectado}>
<Text style={styles.continuarConectadoText}>Manter conectado</Text>
</CustomCheckBox>
<View style={{ height: 20 * 3, width: '80%' }}>
<Button
title="ACESSAR SISTEMA"
onPress={() => this.fazerLogin()}
titleStyle={styles.buttonText}
buttonStyle={styles.button}
loading={logando}
/>
</View>
</KeyboardAvoidingView>
{erroLogin && (
<View style={{ width: '80%', height: '10%', borderRadius: 1.7 * 3, marginTop: '5%' }}>
<ErrorBox
defaultMessage={
erroLogin.response.status === 401
? 'Email ou senha incorretos'
: 'Ops, houve um erro. Tente novamente'
}
/>
</View>
)}
<Text style={styles.versao}>{Constants.manifest.version}v</Text>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
keyboardViewContainer: {
width: '100%',
alignItems: 'center'
},
input: {
width: '80%',
height: 16.7 * 3,
borderRadius: 1.7 * 3,
fontSize: 4.7 * 3,
fontFamily: 'roboto-medium-500',
backgroundColor: '#ffffff',
paddingHorizontal: 6 * 3,
},
esqueceuView: {
width: '80%',
},
esqueceuSenha: {
fontFamily: 'roboto-medium-500',
letterSpacing: 0,
color: '#ffffff',
fontSize: 5 * 3,
marginTop: 8 * 3,
marginBottom: 8 * 3,
},
buttonText: {
fontFamily: 'roboto-medium-500',
color: '#ffffff',
fontSize: 4.7 * 3,
},
button: {
borderRadius: 1.7 * 3,
backgroundColor: '#de0059',
},
continuarConectadoView: {
flexDirection: 'row',
width: '80%'
// justifyContent: 'space-between'
},
continuarConectadoText: {
fontFamily: 'roboto-medium-500',
letterSpacing: 0,
color: '#ffffff',
fontSize: 5 * 3,
marginTop: 2 * 3,
marginBottom: 8 * 3,
marginLeft: 3 * 3
},
versao: {
color: '#ffffff',
fontFamily: 'roboto-regular',
fontSize: 16,
position: 'absolute',
top: '90%'
}
});
答案 0 :(得分:2)
我在世博论坛上发布了这个问题,我得到了答案。
我所要做的就是将内容包装在ScrollView中的KeyboardAvoidView中,并且它有效。仍然试图弄清楚为什么这是必要的,因为文档没有说明任何内容。
无论如何,这里是答案https://forums.expo.io/t/problems-with-keyboardavoidview/7799
的链接我希望它可以帮助其他人。
答案 1 :(得分:2)
SDK 37目前还有另一个解决方法。 只需将此样式代码添加到屏幕的根视图即可:
{minHeight:Math.round(windowHeight))}
然后键盘将不会调整视图的大小。
import React from 'react';
import {
StyleSheet, View, useWindowDimensions,
} from 'react-native';
export default function AvoidViewMoving() {
const windowHeight = useWindowDimensions().height;
return (
<View
style={[{ minHeight: Math.round(windowHeight) }]}
>
{/* Your stuff */}
</View>
);
}
这个想法不是我的。感谢Ksedline在GitHub上发表以下评论: https://github.com/expo/expo/issues/7589#issuecomment-629863678
答案 2 :(得分:0)
Viqueébr,entãvouquebrar o protocolo e escrever em portugues,da uma olhada no manifest.xml e olha essa tag:
android:windowSoftInputMode,oadjustPanéoque entrega o comportamento que tu quer acho,senãomemumas outras views do do native pra ignorarem o keyboard
答案 3 :(得分:0)
尝试将 KeyboardAvoidingView 中的所有内容都包含在 ScrollView
中 <KeyboardAvoidingView style={{ flex: 1}}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<ScrollView>
//your container view is here
</ScrollView>
</KeyboardAvoidingView>