“@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 應該也是相同的解決方式。
