Pomiar układu

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Czasami potrzebujesz zmierzyć bieżący układ, aby wprowadzić zmiany w całym układzie lub podjąć decyzje i wywołać określoną logikę.

React Native udostępnia natywne metody pozwalające poznać wymiary widoków.

Najlepszym sposobem wywołania tych metod jest użycie hooka useLayoutEffect: zapewni on najświeższe wartości pomiarów i pozwoli zastosować zmiany w tej samej klatce, w której obliczane są wymiary.

Typowy kod będzie wyglądał następująco:

tsx

function AComponent(children) {
  const targetRef = React.useRef(null)

  useLayoutEffect(() => {
    targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
      //do something with the measurements
    });
  }, [ /* add dependencies here */]);

  return (
    <View ref={targetRef}>
     {children}
    <View />
  );
}

uwaga

Opisane metody są dostępne w większości domyślnych komponentów React Native. Nie są jednak dostępne w komponentach złożonych, które nie są bezpośrednio oparte o natywny widok. Dotyczy to zwykle większości komponentów definiowanych w twojej aplikacji.

measure(callback)

Określa położenie na ekranie (x i y), width oraz height danego widoku w viewporcie. Zwraca wartości asynchronicznie poprzez callback. W przypadku sukcesu callback zostanie wywołany z argumentami:

• x: współrzędna x punktu początkowego (lewy górny róg) mierzonego widoku w viewporcie.

• y: współrzędna y punktu początkowego (lewy górny róg) mierzonego widoku w viewporcie.

• width: width widoku.

• height: height widoku.

• pageX: współrzędna x widoku w viewporcie (zwykle całego ekranu).

• pageY: współrzędna y widoku w viewporcie (zwykle całego ekranu).

Zwócone przez measure() wartości width i height to width i height komponentu w viewporcie.

measureInWindow(callback)

Określa położenie (x i y) danego widoku w oknie i zwraca wartości asynchronicznie poprzez callback. Jeśli korzeń React jest osadzony w innym natywnym widoku, dostaniesz współrzędne absolutne. W przypadku sukcesu callback zostanie wywołany z argumentami:

• x: współrzędna x widoku w bieżącym oknie.

• y: współrzędna y widoku w bieżącym oknie.

• width: width widoku.

• height: height widoku.