当虚拟键盘出现在本机反应中时如何自动向上滚动屏幕（在android上）

Posted 2023-04-18

【中文标题】当虚拟键盘出现在本机反应中时如何自动向上滚动屏幕（在android上）

【英文标题】：How to auto scroll the screen up when virtual keyboard appears in react native (on android)

【发布时间】：2020-06-19 07:12:23

【问题描述】：

虚拟键盘覆盖了文本输入，我看不到我正在输入的内容。如何避免这种情况？ （我尝试使用 KeyboardAwareScrollView 但它仍然涵盖了文本输入）。 我遇到的另一个问题是关于我的 styles.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>

与 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>
    );
  

【参考方案1】：

如果你想让屏幕向上，你可以使用<KeyboardAvoidingView> 而不是 <KeyboardAwareScrollView> 除非您希望用户能够在键盘打开时滚动屏幕，否则它更容易实现并且执行相同的工作。behavior='padding'

<View style=styles.container>
   <KeyboardAvoidingView behavior="padding">

         ... Your UI ...

   </KeyboardAvoidingView>
</View>

或者，您可以将<View> 替换为<KeyboardAvoidingView>，如下所示：

<KeyboardAvoidingView behavior="padding" style=styles.container>

         ... Your UI ...

</KeyboardAvoidingView>

【讨论】：

试过了，还是一样:(我已经添加了代码sn-p和截图

嘿，添加这个成功了！ ` const keyboardVerticalOffset = Platform.OS === 'ios' ? 40：0 返回（）`