React Native 그림 에서 구성 요 소 를 보 는 방법

React Native 그림 보기 구성 요소:react-native-image-viewer,순수 JS 구성 요소,작고 빠 른 아이콘 보기 구성 요소.그림 확대 축소 지원,그림 불 러 오기 실패 설정 대체 그림 지원,그림 을 로 컬 에 저장 하 는 기능 지원.
효과 도

설치 방법

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: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').width,
     }}
    />
   </View>
  );
 }
}

주요 매개 변수 설명
  • imageUrls 이미지 url 주소 의 배열
  • enableImageZoom 크기 조정 허용 여부
  • failImageSource 불 러 오 는 데 실 패 했 을 때 보 이 는 그림
  • loadingRender 로 딩
  • renderHeader 머리 스타일
  • renderFooter 아래쪽 스타일
  • renderIndicator 페이지 표시 기 스타일
  • 전체 예시
    전체 코드:https://github.com/forrest23/ReactNativeComponents이번 예제 코드 는 Component 06 폴 더 에 있 습 니 다.
    구성 요소 주소:https://github.com/ascoders/react-native-image-viewer
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기