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"

注意：此更改后，您需要在android文件夹中运行gradlew clean，在项目目录中运行react-native run-android

Answer 2

投放

android:windowSoftInputMode="adjustNothing"

在清单中为我工作。

Answer 3

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

管理工作流程

如果使用 expo，您可以在 softwareKeyboardLayoutMode 中像这样使用 app.json：

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

您需要使用 38.0.0+ 版本的博览会

裸工作流程

否则，修改 AndroidManifest.xml 有效：

windowSoftInputMode="adjustPan"

Answer 4

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

我已经尝试过了

windowSoftInputMode="adjustPan"

有时候可以，但是行为不当。

然后我遇到了这个

windowSoftInputMode="adjustResize"

这也有不当行为我终于将两者结合起来，并且开箱即用。

android:windowSoftInputMode="adjustPan|adjustResize"

然后您可以使用本机的KeyboardAvoidingView组件。

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

希望这对您有所帮助。

Answer 5

好吧，多亏了React Native FB小组，我得到了一个解决方案：状态栏必须不是“隐藏”才能使其生效。真是奇怪的错误..

Answer 6

对于任何冒险进入这个领域的人来说，这里有一些致命的教程：

我很快会亲自为这个项目仔细研究HOC解决方案，但就目前而言，我只需要解决这个问题，windowSoftInputMode="adjustPan"为我做了。

有了这个，键盘只会出现在视图的顶部上。使用默认的resize选项，每个组件都使用flex: 1并对齐/对齐center，因此视图会受到各种损坏。考虑到我的视图只有一个输入并且是8视图，8步过程的一部分，这对我来说太过分了，因为键盘甚至没有用adjustPan覆盖输入的顶部。

但是，在我看来，最佳解决方案是将<KeyboardAvoidingView />与添加和删除事件侦听器结合使用，并使用某些状态切换来交换组件styles。这是通过两种键盘状态在Android和iOS上完全控制UI的唯一方法。

Answer 7

唯一适用于我的解决方案是：

定义 keyboardVerticalOffset 并将所有内容放入 ScrollView 中，将 keyboardVerticalOffset = {-500}

<KeyboardAvoidingView style = {styles.container} 
behavior="position" keyboardVerticalOffset={-550}>  

ScrollView
    TextInput

我尝试了许多解决方案，从将XML中的android windowsoft更改为容器的高度，然后我没有在Github上找到此解决方案。

Answer 8

设置

android：windowSoftInputMode =“ adjustPan”

在AndroidManifest.xml中的MainActivity上对我有用！

但是，不建议使用android:windowSoftInputMode="adjustNothing" ，因为它完全可以让您自由地进行响应键盘的任何设计。

Answer 9

在主“ AndroidManifest.xml”文件中，将android:windowSoftInputMode="adjustResize"更改为android:windowSoftInputMode="adjustPan"或android:windowSoftInputMode="adjustNothing"。

'android：windowSoftInputMode =“ adjustNothing”'涵盖了屏幕上出现键盘的部分，并隐藏了之前的内容。键盘处于活动状态时，可能无法滚动。

android:windowSoftInputMode="adjustPan"将选定的输入字段推到键盘上方，并允许您滚动而不会像android:windowSoftInputMode="adjustResize"那样将整个组件推到不适当的位置。

Answer 10

我知道这很晚了，但是上面的答案对我没有用。我在KeyboardAvoidingView以外的ScrollView处尝试过behavior={'padding'}，因为我猜behavior={'position'}已经弄乱了视图。以下是我的代码

<KeyboardAvoidingView behavior="padding">
   <ApplicationDetailsTabs
    initialIndex={this.state.activeTab}
    onChange={this.onTabChange}
    />
            <ScrollView style={styles.container}>

Answer 11

我有一个特殊的情况，我唯一可以防止这种情况发生的方法就是给有问题的TextInput设置一个minHeight样式。

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

11 个答案:

管理工作流程

裸工作流程