Site icon May's Notes

[React Native] 解決 react-native-action-sheet 被 Modal 覆蓋住的問題

React Native logo

“@expo/react-native-action-sheet”: “^4.0.1”,
“@rneui/base”: “4.0.0-rc.7”,
“@rneui/themed”: “4.0.0-rc.8”,

大致形容一下這個問題:使用 React Native Elements 的 Dialog 並在 Dialog 中添加了一個按鈕,點下按鈕後要展開 ActionSheet,展開後 ActionSheet 會被 Dialog 覆蓋無法對 ActionSheet 中的選項進行操作。

解決方法

showActionSheetWithOptions 方法加上 autoFocus: true 就能讓 action sheet 顯示在 modal 之上。

import { useActionSheet } from '@expo/react-native-action-sheet'

const ImageButton = ({ setImage }) => {
  const { showActionSheetWithOptions } = useActionSheet()

  const onPress = () =>
    showImageActionSheet(showActionSheetWithOptions, setImage)
    
  // ...
}

const showImageActionSheet = (
  showActionSheetWithOptions,
  callback,
) => {
  const options = ['拍照','選擇照片','取消‘]
  const destructiveButtonIndex = 0
  const cancelButtonIndex = 2

  showActionSheetWithOptions(
    {
      options,
      cancelButtonIndex,
      destructiveButtonIndex,
      autoFocus: true, // 加上這句
    },
    (buttonIndex) => {
      switch (buttonIndex) {
        case 0:
          // ...
          break
        case 1:
          // ...
          break
        default:
          break
      }
    },
  )
}

其他 UI library 應該也是相同的解決方式。

Exit mobile version