React에서 Native를 사용하여 이미지 보기 컴포넌트 구현

亚连
풀어 주다: 2018-06-02 11:11:50
원래의
2220명이 탐색했습니다.

이 글에서는 주로 React Native에서 이미지 컴포넌트를 보는 방법을 소개하고 있으니 참고용으로 올려보겠습니다.

React 네이티브 이미지 보기 구성 요소: React-native-image-viewer, 순수 JS 구성 요소, 작고 빠른 아이콘 보기 구성 요소. 이미지 확대 및 축소 지원, 이미지 로드 실패 시 대체 이미지 설정 지원, 이미지 로컬 저장 지원 및 기타 기능을 지원합니다.

Rendering

설치 방법

npm i react-native-image-zoom-viewer --save
로그인 후 복사

사용 예

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

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>
  );
 }
}
로그인 후 복사

주요 매개변수 설명

  1. imageUrls 이미지 URL 주소 배열

  2. enableImageZoom 스케일링 허용 여부

  3. failImageSource 로딩 실패 시 표시되는 그림

  4. loadingRender loading

  5. renderHeader Header style

  6. renderFooter Bottom style

  7. renderIndicator 페이지 번호 표시 스타일

위 내용은 제가 편집한 내용입니다. 모두에게 도움이 되는 미래의 도움.

관련기사:

vue는 vue-i18n과 결합하여 백그라운드 데이터의 다국어 전환 방식을 구현합니다.

JQuery는 select 컴포넌트의 선택된 값 방식을 선택합니다.

$set 및 배열 업데이트 방식 vue.js_ vue.js

위 내용은 React에서 Native를 사용하여 이미지 보기 컴포넌트 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿