uni-app plus.nativeUI.previewImage在安卓机型带底部导航（参考线）的设备上不能全屏显示

在使用 uni-app 的 plus.nativeUI.previewImage 方法预览图片时，如果安卓设备带有底部导航栏（参考线），可能会导致图片无法全屏显示。这是因为 previewImage 默认不会考虑到底部导航栏的高度，导致图片被遮挡或显示不全。

解决方案

1. 手动调整图片预览区域

你可以通过手动调整图片预览区域的大小，以确保图片能够全屏显示。具体步骤如下：

plus.nativeUI.previewImage(urls, {
  top: '0px', // 设置顶部位置
  bottom: '0px', // 设置底部位置
  left: '0px', // 设置左侧位置
  right: '0px' // 设置右侧位置
});

2. 动态计算底部导航栏高度

如果底部导航栏的高度是动态的（例如不同的设备可能有不同的导航栏高度），你可以通过 plus.navigator.getSafeAreaInsets() 方法来获取安全区域的边距，然后根据这些边距来调整预览区域。

plus.navigator.getSafeAreaInsets((res) => {
  const bottomInset = res.bottom; // 获取底部安全区域的高度
  plus.nativeUI.previewImage(urls, {
    top: '0px',
    bottom: bottomInset + 'px', // 根据底部安全区域高度调整
    left: '0px',
    right: '0px'
  });
});

3. 使用 uni.previewImage 替代

uni-app 提供了 uni.previewImage 方法，它可以更好地处理全屏显示问题，尤其是在带有底部导航栏的设备上。你可以考虑使用 uni.previewImage 来替代 plus.nativeUI.previewImage。

uni.previewImage({
  urls: urls, // 图片地址列表
  current: 0, // 当前显示的图片索引
  indicator: 'default', // 是否显示指示器
  loop: false, // 是否循环预览
  longPressActions: {
    itemList: ['发送给朋友', '保存图片', '收藏'],
    success: function(data) {
      console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
    },
    fail: function(err) {
      console.log(err.errMsg);
    }
  }
});

4. 使用 CSS 调整样式

如果你在自定义页面中使用 previewImage，可以通过 CSS 来调整图片容器的样式，确保图片能够全屏显示。

.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  z-index: 9999;
}

然后在 JavaScript 中应用这个样式：

plus.nativeUI.previewImage(urls, {
  styles: {
    'preview-container': 'preview-container'
  }
});