如何在 React Native 的 ActionSheetIOS 中使用 iPad 的锚点选项？

Question

根据 https://facebook.github.io/react-native/docs/actionsheetios 上提供的 React Native 文档，我们必须将数字传递给锚点选项。老实说，我在整个文档中没有读过更模糊的句子，我完全迷路了。

anchor (number) - the node to which the action sheet should be anchored (used for iPad)

我试过玩弄一堆数字，但结果总是一样的。 ActionSheet 打开到屏幕的左上角。

据我目前所能理解的，以下应该有效：

ActionSheetIOS.showActionSheetWithOptions(
      {
        cancelButtonIndex: buttonsArray.length - 1,
        options: buttonsArray,
        anchor: 51, // THIS. WHAT THE HELL IS THIS NUMBER SUPPOSED TO BE?
      },
      (buttonIndex) => {
       .
       .
       .
      }
);

Answer 1

嗯，所以在我发布上面的问题后又仔细研究了 13 分钟之后，我找到了答案。

React Native 提供了一个名为findNodeHandle() 的函数。传递要用来锚定 ActionSheet 的组件的引用。

让我们看看它是如何使用的。

import { findNodeHandle } from 'react-native'

.
.
.

ActionSheetIOS.showActionSheetWithOptions(
      {
        ...
        anchor: findNodeHandle(this.someFancyButtonRef)
      },
      (buttonIndex) => {
       ...
      }
);
.
.
.
render() {
    return (
        .
        .
        .
        <TouchableOpacity
            ref={(ref) => { this.someFancyButtonRef = ref; }}
        >
          <Text>Some Fancy Button</Text>
        </TouchableOpacity>
        .
        .
        .
    )
}

如何在 React Native 的 ActionSheetIOS 中使用 iPad 的锚点选项？

How to use the anchor option for iPad in React Native's ActionSheetIOS?

react-native

react-native-ios