Как автоматически прокрутить экран вверх, когда виртуальная клавиатура отображается в реагировать на родной (на android) - PullRequest
Новая
       49

Как автоматически прокрутить экран вверх, когда виртуальная клавиатура отображается в реагировать на родной (на android)

0 голосов
/ 06 марта 2020

Виртуальная клавиатура покрывает ввод текста, и я не вижу, что я печатаю. Как этого избежать? (Я пытался использовать 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>
    );
  }
}

keyboard covers textinput

1 Ответ

0 голосов
/ 07 марта 2020

Если вы хотите, чтобы экран go вверх, вы можете использовать <KeyboardAvoidingView> вместо <KeyboardAwareScrollView> его проще реализовать и выполнять ту же работу, если только вы не хотите, чтобы пользователь мог прокручивать экран при открытой клавиатуре. behavior='padding' << эта опора для экрана, как действовать. Он также принимает [height, position] в качестве значения. </p> 

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

         ... Your UI ...

   </KeyboardAvoidingView>
</View>

или для краткости вы можете заменить <View> на <KeyboardAvoidingView> следующим образом: 

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

         ... Your UI ...

</KeyboardAvoidingView>
...