React Native

该包为 @floating-ui/core 提供了 React Native 绑定，该库为浮动元素提供锚点定位，以将其定位在给定的参考元素旁边。

¥This package provides React Native bindings for @floating-ui/core — a library that provides anchor positioning for a floating element to position it next to a given reference element.

npm install @floating-ui/react-native

用法

¥Usage

useFloating() 钩子接受除 strategy 之外的所有 computePosition 的选项。

¥The useFloating() hook accepts all of computePosition’s options excluding strategy.

import {View, Text} from 'react-native';
import {useFloating, shift} from '@floating-ui/react-native';
 
function App() {
  const {refs, floatingStyles} = useFloating({
    middleware: [shift()],
  });
 
  return (
    <View>
      <View ref={refs.setReference} collapsable={false}>
        <Text>Reference</Text>
      </View>
      <View
        ref={refs.setFloating}
        collapsable={false}
        style={floatingStyles}
      >
        <Text>Floating</Text>
      </View>
    </View>
  );
}

默认情况下，这会将浮动元素定位在参考元素的底部中心。

¥This will position the floating element at the bottom center of the reference element by default.

默认情况下，定位是相对于父级的，请参阅 ScrollView 或 offsetParent 进行调整。

¥Positioning is relative to the parent by default, see ScrollView or offsetParent to adjust this.

refs.setReference 是用于定位的参考（或锚点）元素。

¥refs.setReference is the reference (or anchor) element that is being referred to for positioning.
refs.setFloating 是相对于参考元素定位的浮动元素。

¥refs.setFloating is the floating element that is being positioned relative to the reference element.
floatingStyles 是应用于浮动元素的 style 属性的定位样式对象。

¥floatingStyles is an object of positioning styles to apply to the floating element’s style prop.

refs 是使它们具有反应性的函数 - 这确保通过更新位置正确处理对引用或浮动元素的更改（例如条件渲染）。

¥The refs are functions to make them reactive — this ensures changes to the reference or floating elements, such as with conditional rendering, are handled correctly by updating the position.

ScrollView

当你的浮动元素被传送到应用根目录，而引用元素位于 <ScrollView /> 内时，传递 sameScrollView 选项，并将 scrollProps 传播到组件：

¥When your floating element is portaled to the app root, while the reference element is inside a <ScrollView />, pass the sameScrollView option, and spread scrollProps to the component:

import {View, Text, ScrollView} from 'react-native';
import {useFloating} from '@floating-ui/react-native';
 
function App() {
  const {refs, floatingStyles, scrollProps} = useFloating({
    sameScrollView: false,
  });
 
  return (
    <View>
      <ScrollView {...scrollProps}>
        <View ref={refs.setReference} collapsable={false}>
          <Text>Reference</Text>
        </View>
      </ScrollView>
 
      <View
        ref={refs.setFloating}
        collapsable={false}
        style={floatingStyles}
      >
        <Text>Floating</Text>
      </View>
    </View>
  );
}

锚定

¥Anchoring

useFloating() 仅在渲染时或参考/浮动元素更改时计算位置。根据浮动元素所在的上下文，你可能需要更新其在效果中的位置。

¥useFloating() only calculates the position once on render, or when the reference/floating elements changed. Depending on the context in which the floating element lives, you may need to update its position in an Effect.

Hook 返回一个 update() 函数来随意更新位置：

¥The Hook returns an update() function to update the position at will:

const {update} = useFloating();

引用

¥Refs

要访问元素，你可以访问 refs：

¥To access the elements, you can either access the refs:

const {refs} = useFloating();
 
// Inside an Effect or event handler:
refs.reference.current;
refs.floating.current;

或者直接元素：

¥Or the elements directly:

const {elements} = useFloating();
 
// During render, unlike the refs:
elements.reference;
elements.floating;

如果外部元素位于组件之外，则可以像这样同步：

¥External elements can be synchronized like so, if they live outside the component:

function MyComponent({referenceEl, floatingEl}) {
  const {refs} = useFloating({
    elements: {
      reference: referenceEl,
      floating: floatingEl,
    },
  });
}

箭头

¥Arrow

普通的 ref 可以作为 element 值传递：

¥A plain ref can be passed as the element value:

import {useRef} from 'react';
import {useFloating, arrow} from '@floating-ui/react-native';
 
function App() {
  const arrowRef = useRef();
  const {
    refs,
    floatingStyles,
    middlewareData: {arrow: {x: arrowX, y: arrowY} = {}},
  } = useFloating({
    middleware: [arrow({element: arrowRef})],
  });
 
  // Pass the `arrowRef` to the element
}

offsetParent

如果需要定位，请将其传递给浮动元素的 offsetParent：

¥Pass this to the floating element’s offsetParent, if required for positioning:

import {View, Text, ScrollView} from 'react-native';
import {useFloating} from '@floating-ui/react-native';
 
function App() {
  const {refs, floatingStyles} = useFloating({
    sameScrollView: false,
  });
 
  return (
    <View>
      <ScrollView>
        <View ref={refs.setReference} collapsable={false}>
          <Text>Reference</Text>
        </View>
      </ScrollView>
 
      <View ref={refs.setOffsetParent} collapsable={false}>
        <View
          ref={refs.setFloating}
          collapsable={false}
          style={floatingStyles}
        >
          <Text>Floating</Text>
        </View>
      </View>
    </View>
  );
}