React-native how to move up Textfield above keyboard

问题

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