React Native에서 사진 보기 구성 요소를 구현하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

React Native에서 사진 보기 구성 요소를 구현하는 방법

小云云

Mar 03, 2018 am 09:22 AM

nativereact그림

React 네이티브 이미지 보기 구성 요소: React-native-image-viewer, 순수 JS 구성 요소, 작고 빠른 아이콘 보기 구성 요소. 이미지 확대 및 축소, 이미지 로드 실패 시 대체 이미지 설정, 이미지 로컬 저장 등을 지원합니다. 이번 글에서는 주로 React Native 이미지 보기 컴포넌트의 방법을 소개하고 있으니, 도움이 되셨으면 좋겠습니다.

Rendering

설치 방법

npm i react-native-image-zoom-viewer --save

사용 예

const images = [
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
];

export default class Component06 extends Component {
 constructor(props) {
  super(props);
 }

 render() {
  return (
   <View style={{ flex: 1 }}>
    <ImageViewer
     imageUrls={images}
     failImageSource={{
      url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
      width: Dimensions.get(&#39;window&#39;).width,
      height: Dimensions.get(&#39;window&#39;).width,
     }}
    />
   </View>
  );
 }
}

주요 매개변수 설명

imageUrls 이미지 URL 주소 배열
enableImageZoom 확대/축소 허용 여부
failureImageSource 로드 실패 시 표시되는 그림
loadingRender loading loading
renderHeader Header style
renderFooter Bottom style
renderIndicator 페이지 번호 표시 스타일

관련 기사

react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中，canvas用于绘制各种图表、动画等；可以利用“react-konva”插件使用canvas，该插件是一个canvas第三方库，用于使用React操作canvas绘制复杂的画布图形，并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中，antd是基于Ant Design的React UI组件库，主要用于研发企业级中后台产品；dva是一个基于redux和“redux-saga”的数据流方案，内置了“react-router”和fetch，可理解为应用框架。

React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流，而是单向数据流。单向数据流是指数据在某个节点被改动后，只会影响一个方向上的其他节点；React中的表现就是数据主要通过props从父节点传递到子节点，若父级的某个props改变了，React会重渲染所有子节点。

Java中Native修饰符的使用方法Apr 22, 2023 pm 03:46 PM

Native修饰符的使用native主要用于方法上1、一个native方法就是一个Java调用非Java代码的接口。一个native方法是指该方法的实现由非Java语言实现，比如用C或C++实现。2、在定义一个native方法时，并不提供实现体（比较像定义一个JavaInterface），因为其实现体是由非Java语言在外面实现的。说明Java语言本身不能对操作系统底层进行访问和操作，但是可以通过JNI接口调用其他语言来实现对底层的访问。JNI是Java本机接口（JavaNativeInterf