如何避免键盘在 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>

这是键盘输入:

<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屋！