IOS版本Modal被键盘遮挡，Android正常

[evan0204]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://rn.mobile.ant.design/components/modal-cn/

Steps to reproduce

RN: 0.57.8 Modal弹出，设置如下： <Modal popup maskClosable visible={this.props.visible} animationType="slide-up" onClose={onClose}>...

在Android 中正常，Modal 会自动移动到键盘顶部，IOS中则不行。在Modal中加入：KeyboardAvoidingView 组件也无效

What is expected?

IOS 应该和 Android 一样，会移动到键盘顶部，不造成遮挡问题

What is actually happening?

IOS一直保持在屏幕下方，造成弹出键盘遮挡了Modal框，无法看见输入内容

Environment	Info
antd	3.0.6
React	16.6.3
System	IOS12.x
Browser	iPhone

[ant-design-bot]

Hello @Evan-Future. Please provide a re-producible demo: https://codesandbox.io/s/9ll8k8614p?module=%2Fsrc%2FApp.js or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

[BANG88]

来点代码重现一下，prompt 已经使用 KeyboardAvoidingView 处理过键盘了。

[evan0204]

`<Modal popup maskClosable visible={this.props.visible} animationType="slide-up" onClose={onClose} {...modal}

<Flex direction="column" align="stretch" style={{ minHeight: size(60) }}> {titleView} {contentView} {footerButtonView} `

不是prompt， 就是直接使用的Modal方式，我在Modal 外层或内层都加了KeyboardAvoidingView也无效，只有ios 平台无效，android 是没问题的

[BANG88]

你的意思是要Modal自动适应键盘吗？

[evan0204]

你的意思是要Modal自动适应键盘吗？

键盘弹出时候，Modal 应该根据键盘高度进行上移。不造成遮挡，输入内容无法看见

[BANG88]

你先看看 prompt 的代码。 你是不是也是这样处理的。

[evan0204]

你先看看 prompt 的代码。 你是不是也是这样处理的。

上面的代码是Popup核心代码

下面是PayModal 核心代码：<KeyboardAvoidingView enabled behavior="padding"> <Popup isButton buttonText="下一步" onClick={this.payType.bind(this)} onClose={this.onClose.bind(this)} visible={typeVisible} title={typeTitle} type="pay" payInfo={payInfo} /> <Popup isButton buttonText="确定付款" onClick={this.payMoney.bind(this)} onClose={this.onClose.bind(this)} visible={payVisible} title={payTitle} type="payPwd" /> </KeyboardAvoidingView>

[evan0204]

你先看看 prompt 的代码。 你是不是也是这样处理的。

我看了代码逻辑是差不多的，关键是Android 上是ok的，IOS不行，应该是IOS的兼容性问题

[BANG88]

@Evan-Future 有没有找到解决方案，可以把你的完整代码贴一下吗？我这边看一看

能运行的，不要依赖你们自己的组件的。

[evan0204]

@Evan-Future 有没有找到解决方案，可以把你的完整代码贴一下吗？我这边看一看

能运行的，不要依赖你们自己的组件的。

` <Modal popup maskClosable animationType="slide-up" visible={this.state.testVisible} onClose={() => this.setState({ testVisible: false })}

<Flex direction="column" align="stretch" style={{ minHeight: 100 }}>

`

以上这个代码可测试，Android正常，IOS键盘还是会有遮挡，去掉Modal后正常

Demo: https://codesandbox.io/embed/wingblank-3tiul

@bang88

[stechrayo]

@Evan-Future 请问你后续如何解决的，遇到了相同的问题

[evan0204]

@Evan-Future 请问你后续如何解决的，遇到了相同的问题

作者没有回复了，并没有解决，IOS还是一样有问题

[81735595]

@Evan-Future 请问你后续如何解决的，遇到了相同的问题

作者没有回复了，并没有解决，IOS还是一样有问题

简单写了个用rn的modal替换antD的modal的例子，代码里RnDModal那部分，配合一个自定义的蒙层，展示效果差不多，貌似是popup属性的问题，只有在加了这个属性的时候，modal配合keyboardAvoidingView在ios环境下就会不生效。简单看了看antD的代码，没看出逻辑问题来，感觉可能是样式的问题。我的代码中AntDModal1使用了popup属性，keyboardAvoidingView就没生效，AntDModal2没有使用popup属性，就生效了。

我遇到的情况更难搞，popup模式的弹框自己实现了，但是弹框中还有datepicker组件，datepicker中也用了popup模式的弹框，会被自己实现的modal的视图盖住，所以还得把datepicker涉及到popup的地方都抽出来单独改一遍，折腾一下午，脑壳疼……

https://codesandbox.io/embed/modal-test-u6dq0

[bhd119]

我们在rn0.63.3版本上也遇到这个问题了。还没有解决这个问题吗？

[tourze]

同样遇到这个问题

[quguoliang]

• [x] 我已经搜索了这个存储库的问题，并相信这不是重复的。

转载链接

https://rn.mobile.ant.design/components/modal-cn/

重现步骤

RN: 0.57.8 Modal弹出，设置如下： ...

在Android中正常，Modal会自动移动到键盘顶部，IOS中则不能。在Modal中加入：KeyboardAvoidingView组件也无效

什么是预期？

IOS应该和Android一样，会移动到键盘顶部，不遮挡遮挡问题

实际发生了什么？

IOS一直保持在屏幕下方，导致弹出键盘遮挡了Modal框，无法看到输入内容

环境 信息 蚂蚁 3.0.6 反应 16.6.3 系统 IOS15.x 浏览器 苹果手机

原因是inputItem的键盘属性的transform为translateZ(0)，而modal的为translateZ(1px)，所以我们只需要把键盘属性的transform同样设为translateZ(1px)即可修复。

解决办法：.am-number-keyboard-wrapper{ transform: translateZ(1px); }

[diamont1001]

有解决办法吗？RN 0.71 还是有问题