时间戳

首页 > 解决方案 > 如何在 React Native 的 ActionSheetIOS 中使用 iPad 的锚点选项？

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

问题描述

根据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) => {
       .
       .
       .
      }
);

标签： react-nativereact-native-ios

解决方案

嗯，所以在我发布上面的问题后又挖了整整 13 分钟后，我找到了答案。

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

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

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>
        .
        .
        .
    )
}

推荐阅读