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

Question

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

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

Erm，所以在我发布上述问题后，又经过了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>
        .
        .
        .
    )
}