React-native how to move up Textfield above keyboard

末鹿安然 提交于 2021-02-08 06:51:11

问题


I am trying to move textfields up while showing the keyboard. I am doing login screen in react native application, So, I have added Scrollview.

But, Its scrolling for all devices. But, I need only for iPhone 5s device only.

Even I tried with KeyboardAvoidingView, But, due to this entire data is overlapping.

Any suggestions to avoid this issue?


回答1:


You have to use KeyboardAvoidingView but not with scrollview because scrollview does not have a height. If you have to use KeyboardAvoidingView use without scroll view and if u are using scrollview then automatically u can scroll up and see the text field




回答2:


For anyone that is still looking: There are 2 libraries that help to get the best result with that, for any input field on the content.

  1. 'react-native-keyboard-aware-scrollview';
  2. 'react-native-keyboard-tracking-view';

just import the following:

   import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scrollview';
   import {KeyboardAwareInsetsView} from 'react-native-keyboard-tracking-view';

and your render method should be like:

public render(): JSX.Element {
    return (
       <View style={{flex: 1}}>
       <KeyboardAwareScrollView style={{flex: 1}} keyboardShouldPersistTaps={'always'}>
          {this.renderInputContent()}
        </KeyboardAwareScrollView>
        {this.renderCTA()}
        <KeyboardAwareInsetsView/>
       <View/>

    );
  }


来源:https://stackoverflow.com/questions/54254139/react-native-how-to-move-up-textfield-above-keyboard

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!