react-native-google-places API在<Modal>组件内无法正常工作

• 让下拉菜单在 Modal 内部渲染
  很多第三方地址组件的下拉弹窗默认挂在 App 最外层根视图，Modal 本身是独立层级，直接把下拉菜单挡住了。你去看看组件的配置项，有没有类似 renderInPlace、attachToParent 这类属性，打开它就能让下拉菜单直接渲染在输入框所在的 Modal 容器里，不会被 Modal 层级压着。

• 调整 Modal 的原生层级配置
  不同平台的 Modal 层级机制不一样，针对性调整：

  • iOS 端：给 Modal 加上 presentationStyle="fullScreen"，如果之前开了 transparent 就关掉，避免透明 Modal 的层级冲突；
  • Android 端：试试给 Modal 设置 statusBarTranslucent={false}，同时把下拉菜单的 zIndex 设得比 Modal 高（比如 Modal 设 100，下拉菜单设 200）。

• 自己手写下拉列表
  如果组件不支持内部渲染，那就拆开来做：用普通 TextInput 输入内容，手动调用 Places API 的搜索接口拿结果，然后自己写个 FlatList 当下拉选项放在输入框下面，完全自己控制层级和显示位置，肯定不会被 Modal 挡住。

• 检查容器的 overflow 属性
  给 Modal 和输入框的父容器都加上 overflow: 'visible' 样式，有些时候 Modal 默认是 overflow: 'hidden'，会把超出容器的下拉菜单直接裁掉。

效果对比：

• Modal 内异常效果：
• 页面内正常效果：

内容的提问来源于stack exchange，提问作者renanmalato