如何在Android react-native上避免键盘推送布局

Question

我将面临这个问题几个月,我仍然无法解决它.我在视图的底部有一个文本输入,一旦点击,它就会被软键盘抬起.相反,整个布局被推高,你无法看到它的上半部分.

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

截图: 没有键盘 带键盘

这是我的主要观点:

<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:

<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.

Answer 1

这里的问题是你有:

windowSoftInputMode="adjustResize";

将其更改为:

windowSoftInputMode="adjustPan"

Answer 2

我尝试了所有可以在 GitHub 或堆栈溢出中找到的解决方案。在 AndroidManifest.xml 中添加以下代码行会很有帮助。

我试过这个

windowSoftInputMode="adjustPan"

有时它有效，但行为不端。

然后我遇到了这个

windowSoftInputMode="adjustResize"

这也行为不端，我最终将它们结合在一起，并且开箱即用。

android:windowSoftInputMode="adjustPan|adjustResize"

然后你可以使用 react-native KeyboardAvoidingView 组件。

<KeyboardAvoidingView
    style={{ flex: 1}}
    behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    keyboardVerticalOffset={Platform.OS === 'ios' ? 40 : 0}
  >

希望这对你有帮助。

Answer 3

所有答案都很好，但在使用 expo 时不起作用。

托管工作流程

如果使用expo，你可以softwareKeyboardLayoutMode在里面这样使用app.json：

"android": {
  ...
  "softwareKeyboardLayoutMode": "pan"
},

您需要使用 expo 版本 38.0.0+

裸工作流程

否则，修改AndroidManifest.xml工作：

windowSoftInputMode="adjustPan"

Answer 4

推杆

android:windowSoftInputMode="adjustNothing"

在清单上为我工作。

Answer 5

好吧，多亏了 React Native FB 小组，我得到了一个解决方案：状态栏必须不“隐藏”才能正常工作。真是奇怪的bug..