如何在React Native（Android端）中实现虚拟键盘弹出时自动滚动屏幕？

Question

虚拟键盘覆盖了文本输入区域，导致无法看到正在输入的内容。如何避免这种情况？（我尝试使用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>
    );
  }
}

- Suman Shaw

Answer 1

如果您希望屏幕上移，可以使用<KeyboardAvoidingView>而不是<KeyboardAwareScrollView>，它更容易实现并具有相同的作用，除非您希望用户在键盘打开时滚动屏幕。

behavior='padding'是屏幕如何表现的属性。它也可以取[height, position]作为值。

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

         ... Your UI ...

   </KeyboardAvoidingView>
</View>

或者你可以使用简写方式，将<View>替换为<KeyboardAvoidingView>，如下所示：

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

         ... Your UI ...

</KeyboardAvoidingView>

- Dana

---

尝试过了，仍然是一样的:( 我已经添加了代码片段和截图。 - Suman Shaw

嘿，添加这个代码可行！` const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0return ( ) ` - Suman Shaw