反应原生键盘附属视图
您的 React Industrial app 的键盘附属视图( sticky) 。 支持在iOS上进行互动解职,尊重安全区域并同时在iOS和Android上进行肖像和景观工作.
开始
这个库取决于 react-native-safe-area-context。如果您使用 反应导航 你可能已经在你的依赖, 所以你可以走了。 如果没有,请遵照指示 这里 要安装它。 然后运行 :
yarn add @flyerhq/react-native-keyboard-accessory-view
使用量
import { KeyboardAccessoryView } from '@flyerhq/react-native-keyboard-accessory-view'
import { GestureResponderHandlers } from 'react-native'
// ...
const renderScrollable = (panHandlers: GestureResponderHandlers) => (
// Can be anything scrollable
<ScrollView keyboardDismissMode='interactive' {...panHandlers} />
)
// ...
return (
<KeyboardAccessoryView renderScrollable={renderScrollable}>
// Your accessory view
</KeyboardAccessoryView>
)
处理错误抵消
有时,当您使用标签栏或类似组件时,附属视图不能正确工作. 为了解决这个问题,需要使用下个道具的组合: contentContainerStyle, (中文(简体) ), contentOffsetKeyboardClosed, (中文(简体) ), contentOffsetKeyboardOpened 财务报告和审定财务报表 spaceBetweenKeyboardAndAccessoryView。 。 。 .
首先,你需要决定是否需要在底部需要这个额外的安全区域比值(正如你可以看到键盘打开和关闭时附属视图的大小不同,这是因为在关闭时,安全区域下比值被添加). 例如,如果您有标签栏, 您很可能不需要这个边距, 因为安全是标签栏已经占用的区域 。 要删除此样式 : contentContainerStyle={{ marginBottom: 0 }}。 。 。 .
第一步完成后,需要检查是否在附属视图和键盘之间有空格,后者何时被打开. 如果你这样做,将抵消 spaceBetweenKeyboardAndAccessoryView 道具 (英语). 通常,它可以根据底部安全区域来计算 反应-内在-安全区域-文本 例如,标签栏的高度.
最后,如果附属视图以上内容正确抵消,则验证,如果不是,可以使用 contentOffsetKeyboardClosed 财务报告和审定财务报表 contentOffsetKeyboardOpened 道具来. 有时抵消对一个键盘状态是正确的,如果是这样,请使用其中一个道具. 和现在一样 spaceBetweenKeyboardAndAccessoryView 例如,道具、冲抵是根据底部安全区设置和/或标签栏高度计算的.
道具
KeyboardAccessoryView
-
renderScrollable(要求) - 接受ReactNode。您的可滚动组件. -
style(可选) - 接受 查看样式道具。用于样式视图,其中既包括内容容器,也包括安全区域设置。 将设定一个常用大小写backgroundColor因此,内容容器和安全区域是相匹配的颜色. -
contentContainerStyle(可选) - 接受 查看样式道具。用于设置内容容器的样式,但不用于设置安全区域. -
contentOffsetKeyboardClosed(可选) - 接受一个数字。 键盘打开时用于调整内容偏移. 更多信息 这里。 。 。 . -
contentOffsetKeyboardOpened(可选) - 接受一个数字。 键盘关闭时用于调整内容偏移. 更多信息 这里。 。 。 . -
renderBackground(可选) - 接受返回React节点的函数 。 当您想要将自定义节点作为背景时(如:.<ImageBackground style={StyleSheet.absoluteFill} />) (中文(简体) ). 记住绝对位置. -
scrollableContainerStyle(可选) - 接受 查看样式道具。用于将可滚动组件包裹在容器中的样式renderScrollable。如果您想要滚动来填充整个容器,则尝试通过flex: 1在这里. -
spaceBetweenKeyboardAndAccessoryView(可选) - 接受一个数字。 用于调整从旁视图到键盘之间的空间,当后者打开时. 更多信息 这里。 。 。 . -
useListenersOnAndroid(可选) - 接受布尔值 。 默认情况下,Android OS会在键盘打开后调整窗口大小并自动将附属视图置于键盘上方. 这种行为可以被修正,因此如果出于某种原因从属视图不出现在键盘上方,尝试设置这个道具,它会根据键盘收听器来计算内容高度. 对iOS没有影响.