Keyboard aware scroll view Android issue

这一生的挚爱 提交于 2019-12-06 06:18:44

问题


I've created a react native project using Expo XDE (xde-2.19.3) with a few TextInputs on the screen. Im using KeyboardAwareScrollView to scroll the inputs from under the keyboard into view and works fine on iOS but does not work on Android. Hope that makes sense.

Looked at the KeyboardAwareScrollView docs and saw that I need to configure AndroidManifest.xml but it seems that Expo has already sorted this out: https://github.com/expo/expo/blob/master/template-files/android/AndroidManifest.xml

However I'm still not able to get this working on Android...

What could I be missing?

render() {
    return (
      <KeyboardAwareScrollView
        enableOnAndroid='true'
        enableAutoAutomaticScrol='true'
        keyboardOpeningTime={0}
      >
      <ScrollView style={styles.container}>
        <View style={styles.subcontainer}>
          <View style={styles.form}>
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
            </View>
         </View>
        </ScrollView>
      </KeyboardAwareScrollView>
    );
  }

回答1:


I tried the above solution for cross platform support but its not correct. The right and complete solution if you want the focus with automatic scrolling to TextInput to work is to set parameters as follows:

<KeyboardAwareScrollView
  enableOnAndroid={true}
  enableAutomaticScroll={(Platform.OS === 'ios')}
>
...
</KeyboardAwareScrollView>

This is because enableAutomaticScroll is enabled by default and it mixes up with the native Android behaviour to give unexpected results. So set this field to false when Platform is Android.

And yes also set the following in app.json without which it will not work.

"androidStatusBar": {
  "backgroundColor": "#000000"
}



回答2:


This is how I fixed it:

In app.json I set:

"androidStatusBar": {
  "backgroundColor": "#000000"
}

This fixed the issue, I don't know how but it did. So will leave this here just incase someone else finds it useful.




回答3:


I tried the other solutions and they didn't work for me, but finally I manage to make it work by using the following code:

 <KeyboardAwareScrollView enableOnAndroid={true} extraHeight={130} extraScrollHeight={130}>
  ...
</KeyboardAwareScrollView>



回答4:


 <KeyboardAwareScrollView
        enableOnAndroid={true}
        extraScrollHeight={90}
        >
       <Content>
        <View></View>
       </Content>
<KeyboardAwareScrollView/>



回答5:


Use

<activity android:windowSoftInputMode="adjustResize"></activity>

in your Manifest



来源:https://stackoverflow.com/questions/45466026/keyboard-aware-scroll-view-android-issue

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