Компонент скриншота React Native

внешний интерфейс Android React.js React Native
Компонент скриншота React Native

Эта статья изначально была опубликована в публичном аккаунте: круг разработки ReactNative, и для перепечатки необходимо указать источник.

Компонент скриншота React Native: react-native-view-shot, вы можете сделать снимок экрана текущего экрана или сделать снимок экрана в соответствии с компонентами текущей страницы.Например, если на текущей странице есть компонент изображения и Компонент «Просмотр», вы можете сделать снимок экрана компонента «Изображение» или компонента «Просмотр». Поддерживает iOS и Android.

способ установки

npm install react-native-view-shot
react-native link react-native-view-shot

Пример использования

метод захвата экрана ()

Скриншот текущего экрана соответствует снимку экрана, который поставляется вместе с системой, и фиксируется только содержимое страницы, отображаемой на текущем экране. Если это ScrollView, неотображаемая часть не будет перехвачена.

import { captureScreen } from "react-native-view-shot";

captureScreen({
  format: "jpg",
  quality: 0.8
})
.then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);

CaptureRef(view, options) Захват на основе имени компонента

import { captureRef } from "react-native-view-shot";

render() {
     return (
	 <ScrollView ref="full">
		  <View ref="form1”>
		   </View>
                  <View ref="form2”>
		   </View>
	</ScrollView>
);
}

snapshot = refname => () =>
captureRef(refname, {
  format: "jpg",
  quality: 0.8,
  result: "tmpfile",
  snapshotContentContainer: true
})
.then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);

Укажите имя ссылки для перехватываемого компонента, а затем передайте имя ссылки методу моментального снимка для перехвата содержимого указанного компонента. Если вам нужно перехватить ScrollView, просто передайте «полный» методу моментального снимка. Как метод captureRef, так и метод captureScreen могут задавать параметры, которые описаны ниже. ширина / высота: вы можете указать ширину и высоту конечного сгенерированного изображения. Формат: Укажите формат сгенерированного изображения: png, jpg или webm (Android), по умолчанию — png. качество: качество изображения 0,0–1,0 (по умолчанию). результат: последний сгенерированный тип, который может быть tmpfile, base64 или data-uri. snapshotContentContainer: если установлено значение True, высота компонента будет рассчитываться динамически. Если это компонент ScrollView, будет перехвачена фактическая высота всего ScrollView.

Поддерживаемые компоненты

Пример исходного кода

GitHub — forrest23/ReactNativeComponents: полная коллекция компонентов React Native.

адрес компонента

GitHub - gre/react-native-view-shot: Snapshot a React Native view and save it to an image

Обратите внимание на мой публичный аккаунт WeChat:Круг разработки ReactNative

Категории