當虛擬鍵盤出現在本機反應中時如何自動向上滾動屏幕（在 android 上）

Question

虛擬鍵盤覆蓋了文本輸入，我看不到正在輸入的內容。 如何避免這種情況？ （我嘗試使用 KeyboardAwareScrollView 但它仍然涵蓋文本輸入）。 我遇到的另一個問題是關於我的 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>

使用 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>
    );
  }
}

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>