[英]How to auto scroll the screen up when virtual keyboard appears in react native (on android)
The virtual keyboard covers the text inputs and I cannot see what I'm typing.虚拟键盘覆盖了文本输入,我看不到正在输入的内容。 How to avoid this ?如何避免这种情况? ( I tried using KeyboardAwareScrollView but it still covers the text inputs). (我尝试使用 KeyboardAwareScrollView 但它仍然涵盖文本输入)。 Another issue that I got was an error regarding my styles.container attributes -> justifyContent and alignItems - it said put those inside the ScrollView property - I'm not sure how to do that - I'm new to React native.我遇到的另一个问题是关于我的 style.container 属性的错误 -> justifyContent 和 alignItems - 它说将这些放在 ScrollView 属性中 - 我不知道该怎么做 - 我是 React Native 的新手。
render() {
return (
<KeyboardAwareScrollView>
<View style={styles.container} >
<TextInput
style={styles.input}
underlineColorAndroid="transparent"
placeholder="username"
placeholderTextColor="#00bcd4"
autoCapitalize="none"
secureTextEntry={true}
onChangeText={username => this.setState({ username })}
/>
<View style={styles.btnContainer}>
<TouchableOpacity style={styles.userBtn} onPress={() => this.Login(this.state.email, this.state.password)}>
<Text style={styles.btnTxt}>Login</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAwareScrollView>
with KeyboardAvoidingView also, the same thing:使用 KeyboardAvoidingView 也是一样的:
render() {
return (
// <View style={styles.container} >
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<Text style={styles.heading} >Welcome to SelfCare !</Text>
<Image
style={{width: 200, height: 200, marginBottom: 40}}
source={require('./src/images/icon.png')}
/>
<TextInput
style={styles.input}
underlineColorAndroid="transparent"
placeholder="Email"
placeholderTextColor="#00bcd4"
autoCapitalize="none"
onChangeText={email => this.setState({ email })}
/>
<TextInput
style={styles.input}
underlineColorAndroid="transparent"
placeholder="Password"
placeholderTextColor="#00bcd4"
autoCapitalize="none"
secureTextEntry={true}
onChangeText={password => this.setState({ password })}
/>
<View style={styles.btnContainer}>
<TouchableOpacity style={styles.userBtn} onPress={() => this.Login(this.state.email, this.state.password)}>
<Text style={styles.btnTxt}>Login</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.userBtn} onPress={() => this.SignUp(this.state.email, this.state.password)}>
<Text style={styles.btnTxt}>Sign Up</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
// </View>
);
}
}
If you want the screen to go up you could use如果你想让屏幕上升,你可以使用<KeyboardAvoidingView>
instead of <KeyboardAwareScrollView>
<KeyboardAvoidingView>
而不是<KeyboardAwareScrollView>
it is easier to implement and does the same work unless you want the user to be able to scroll the screen while the keyboard is opened.除非您希望用户能够在键盘打开时滚动屏幕,否则它更容易实现并完成相同的工作。
behavior='padding'
<< this prop is for the screen how to act. behavior='padding'
<< 这个道具是为了屏幕如何行动。 It also takes [height, position] as a value.它还以 [height, position] 作为值。
<View style={styles.container}>
<KeyboardAvoidingView behavior="padding">
... Your UI ...
</KeyboardAvoidingView>
</View>
or for shorthand you could replace <View>
with <KeyboardAvoidingView>
as so:或者简写,您可以将<View>
替换为<KeyboardAvoidingView>
如下所示:
<KeyboardAvoidingView behavior="padding" style={styles.container}>
... Your UI ...
</KeyboardAvoidingView>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.