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

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

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. failureImageSource 로드 실패 시 표시되는 그림

4. loadingRender loading loading

5. renderHeader Header style

6. renderFooter Bottom style

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

관련 권장 사항:

기준 zepto.js_javascript 기술을 사용하여 휴대폰 QQ 공간을 모방한 대형 이미지 보기 컴포넌트인 ImageView.js에 대한 자세한 설명

위 내용은 React Native에서 사진 보기 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!