如何避免键盘在Android react-native上推布局 [英] How to avoid keyboard pushing layout up on Android react-native

问题描述

我面对这个问题已经有几个月了，但仍然无法解决.我在视图的底部输入了一个文本，应该在敲击软键盘后使其上升.而是将整个布局向上推，您看不到其上部.

I'm facing this issue for a few months and I still can't solve it. I have a text input at the bottom of the view that is supposed to rise up with the soft keyboard once tapped. Instead, the whole layout is pushed up and you can't see the upper part of it.

我尝试了许多不同的键盘间隔程序库，但它们都将TextInput推得更高..

I tried many different keyboard spacer libraries but they all just push the TextInput even higher..

屏幕截图:没有键盘使用键盘

这是我的主要视图:

<View
    style={{
      flex: 1,
      alignItems: 'stretch',
      justifyContent: 'space-between',
      overflow: 'hidden',
      backgroundColor: Colors.darkBlue
    }}
  >
    {/* Header */}
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'stretch',
        height: 300
      }}>
      {/* Question bubble */}
      { (this.state.question && this.state.question !== '') ? (
          <TouchableOpacity
            style={{
                flex: 1,
                flexDirection: 'row',
                backgroundColor: 'transparent',
                alignItems: 'stretch',
                paddingRight: QUESTION_SPEAKER_RADIUS
              }}
          >
            <View
              style={{
                  flex: 1,
                  alignSelf: 'stretch',
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'white',
                }}
            >
              <Text>
                {this.state.question}
              </Text>
            </View>
          </TouchableOpacity>
        ) : null
      }
    </View>
    <KeyboardInput
      style={{}}
      onClose={() => this.setState({ displayMode: DISPLAY_MODES.homeEmpty })}
      onConfirm={(text) => this.onConfirmText(text) }
    />
  </View>

这是KeyboardInput:

Here is KeyboardInput:

<View
      style={{
        alignSelf: 'stretch',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        backgroundColor: Colors.pink,
        borderColor: Colors.lime,
        borderTopWidth: 4,
        padding: 6,
      }}>
      <View
        style={{
          flex: 1,
          borderRadius: 6,
          padding: 0,
          backgroundColor: Colors.white,
          alignItems: 'stretch',
        }}
      >
        <TextInput
          placeholder={Strings.child_keyboard_placeholder}
          value={this.state.messageTextInput}
          onChangeText={(text) => this.setState({messageTextInput: text})}
          style={{
            height: 50,
            marginLeft: 10,
            marginRight: CONFIRM_BUTTON_SIZE / 2
          }}
          underlineColorAndroid='transparent'
          numberOfLines={2}
          maxLength={70}
          autoCorrect={false}
          returnKeyType='next'
        />
      </View>
    </View>

在Android上使用RN 0.35.

Using RN 0.35 on Android.

推荐答案

这里的问题是您的AndroidManifest.xml中存在:

The problem here is that you have in your AndroidManifest.xml:

windowSoftInputMode="adjustResize";

将其更改为:

windowSoftInputMode="adjustPan"

注意:完成此更改后，您将需要在android文件夹中运行 ./gradlew clean ，并在您的目录中运行 react-native run-android 项目目录

Note: after this change you'll need run ./gradlew clean in android folder and react-native run-android in your project directory

这篇关于如何避免键盘在Android react-native上推布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！