使用Reaction Native进行键盘和布局处理

问题描述

我一直在试图弄清楚如何在键盘打开后正确处理布局更改(至少在Android上是这样)。我用的是最新的世博会。 我的表单示例：

<View style={{flex: 1}}> 
   <View style={{flex: 1}}></View> 
   <View style={{flex: 2}}> 
     <TextInput></TextInput>
     <TextInput></TextInput>
     <TextInput></TextInput>
     <TextInput></TextInput>
     <Button></Button>
   </View>
</View>

问题是，当我单击任何TextInput时，键盘会挤压其上方的所有内容，直到我关闭键盘时才能触及它。我已经尝试使用：

Keyboard AvoidingView+ScrollView Inside

&q；app.json中的softwareKeyboardLayoutModel"；：PAN&Q；

KeyboardAware ScrollView-似乎工作正常，下面有点问题

我也有一个问题&pan"；设置，Screen会奇怪地调整，当我点击底部的TextInput时，它会挤压顶部元素，但当我点击顶部的TextInput时，它不会挤压顶部元素，这可能会破坏KeyboardAware ScrollView(它会根据我单击打开键盘的位置在屏幕底部添加不同的填充/高度)

有人有更好的解决这个问题的办法吗？我希望它能够简单地在视图上滚动(增加高度？)无需挤压弹性框或更改布局中的任何内容。

推荐答案

使用键盘管理多个输入真的很难避免使用Reaction本地库中的视图。

为了找到解决此问题的方法，并修复iOS中的多个输入和键盘管理问题，我使用了名为react-native-keyboard-aware-scrollview

这确实帮助我实现了我的目标。

您也可以尝试NPM依赖，我希望它一定会帮助您实现您想要的结果。

在这里，我附加了即席组件，我使用它包装我需要在其中管理输入和键盘回避的组件。

临时组件：

import * as React from "react"
import { View, TouchableWithoutFeedback, Keyboard } from "react-native"
import SafeAreaView from 'react-native-safe-area-view'
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"

/**
 * Root component for screen managing safe area view and keyboard avoiding view
 */
const Root = (props) => {
  const { style, children } = props

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
      <KeyboardAwareScrollView
        keyboardShouldPersistTaps={'always'}
        contentContainerStyle={{
          flexGrow: 1 // this will fix scrollview scroll issue by passing parent view width and height to it
        }}
      >
        <TouchableWithoutFeedback
          onPress={Keyboard.dismiss}
          style={{ flexGrow: 1 }}
        >
          <View style={{ flexGrow: 1 }}>
            {children}
          </View>
        </TouchableWithoutFeedback>
      </KeyboardAwareScrollView>
    </SafeAreaView>
  )
}

export default Root