Một Thư Viện Xem Ảnh Hiện Đại và Tùy Chỉnh Cho React Native

Thư Viện Xem Ảnh Cho React Native

Một thư viện xem ảnh cho React Native được xây dựng dựa trên NYTPhotoViewer và FrescoImageViewer

Tính năng chính:

• Nhấn đúp để phóng to
• Chú thích và tóm tắt
• Hỗ trợ nhiều hình ảnh
• Kéo để loại bỏ tương tác
• Hiệu ứng phóng to với hoạt họa
• Hỗ trợ hình ảnh từ xa và hình ảnh cục bộ hoặc ảnh từ Camera Roll
• Và nhiều tính năng khác…

Lưu Ý

Nếu phiên bản react-native của bạn dưới 0.57, vui lòng sử dụng phiên bản 2.x, nếu không, hãy sử dụng phiên bản mới nhất.

Bắt Đầu

$ npm install @merryjs/photo-viewer --save

hoặc

$ yarn add @merryjs/photo-viewer

Cài đặt tự động hầu hết các trường hợp

$ react-native link @merryjs/photo-viewer

Khi bạn hoàn thành việc này, bạn vẫn cần liên kết một số framework vào phần nhúng của xcode của bạn. Ở đây, bạn có một số lựa chọn, vui lòng xem IOS link frameworks để biết thêm chi tiết.

và khởi tạo Thư viện Fresco, vui lòng xem cách khởi tạo Fresco cho Android

Cài đặt thủ công

iOS

. Trong XCode, trong trình duyệt dự án, chuột phải vào Libraries ➜ Add Files to [tên dự án của bạn]
. Đi tới node_modules ➜ @merryjs/photo-viewer và thêm MerryPhotoViewer.xcodeproj
. Trong XCode, trong trình duyệt dự án, chọn dự án của bạn. Thêm libMerryPhotoViewer.a vào Build Phases ➜ Link Binary With Libraries của dự án của bạn
. Chạy dự án của bạn (Cmd+R)<

Liên kết Frameworks cho iOS

Liên kết thủ công

Nếu vì một số lý do mà bạn không muốn sử dụng bất kỳ trình quản lý gói nào từ phía bạn, bạn có thể liên kết các framework như sau:

• Mở dự án xcode của bạn và chọn dự án của bạn. Nếu bạn không chắc chắn, nhấn (command + 1)
• Chọn bảng điều khiển General của mục tiêu, tìm phần Embedded Binaries, nhấn vào biểu tượng + sẽ hiển thị một hộp thoại, sau đó đi tới thư mục node_modules/@merryjs/photo-viewer/ios/Carthage/Build/iOS/ và thêm các framework này vào dự án xcode của bạn. Hãy chắc chắn rằng đã chọn copy items if needed và sau đó nó sẽ trông giống như bên dưới,

CocoaPods

Thêm pod "NYTPhotoViewer", "~> 2.0.0" vào Podfile của bạn

Nếu bạn chỉ sử dụng CocoaPods để xác định các thư viện của bên thứ 3 cho react-native của bạn, bạn có thể thêm điều này vào Podfile mà không cần liên kết đến dự án như ở trên:

pod ‘MerryPhotoViewer’, path: ‘../node_modules/@merryjs/photo-viewer’

Carthage

Nếu bạn muốn sử dụng Carthage trong dự án của bạn, sau đó bạn có thể thêm những phụ thuộc này vào Cartfile của bạn

github "NYTimes/NYTPhotoViewer"

và chạy carthage update khi bạn hoàn thành việc này, bạn có thể liên kết nó giống như Liên kết thủ công từ node_modules mô tả, sự khác biệt duy nhất là sử dụng tệp carthage của bạn thay vì tệp của chúng tôi

Android

. Mở tệp android/app/src/main/java/[...]/MainActivity.java

• Thêm import com.merryjs.PhotoViewer.MerryPhotoViewPackage; vào các khai báo ở đầu tệp
• Thêm new MerryPhotoViewPackage() vào danh sách được trả về bởi phương thức getPackages()

Thêm các dòng sau vào android/settings.gradle:

include ':@merryjs/photo-viewer'
project(':@merryjs/photo-viewer').projectDir = new File(rootProject.projectDir,     '../node_modules/@merryjs/photo-viewer/android')

Chèn các dòng sau vào khối dependencies trong android/app/build.gradle:

compile project(':@merryjs/photo-viewer')

Biện pháp khắc phục cho các phiên bản gradle cũ hơn vui lòng xem #39

include ':merryjs-photo-viewer'
project(':merryjs-photo-viewer').projectDir = new File(rootProject.projectDir,'../node_modules/@merryjs/photo-viewer/android')


compile project(':merryjs-photo-viewer')

Cấu hình Android targetSdkVersion

Chúng tôi sử dụng một thư viện bên thứ ba và cả hai đều được đặt mục tiêu cho targetSdkVersion 25, vì vậy bạn cần cập nhật build.gradle của bạn thành cùng phiên bản hoặc bạn sẽ gặp lỗi khi xây dựng

Cấu hình trông giống như: (android/app/build.gradle)

android {
 compileSdkVersion 25
 buildToolsVersion "25.0.3"

 defaultConfig {
     applicationId "com.merryexamples"
     minSdkVersion 16
     targetSdkVersion 25
     versionCode 1
     versionName "1.0"
     ndk {
         abiFilters "armeabi-v7a", "x86"
     }

     renderscriptTargetApi 25
     renderscriptSupportModeEnabled true
 }
    // ...
}

Nếu chúng tôi có bất kỳ giải pháp tốt hơn nào, chúng tôi sẽ cập nhật phần này trong tương lai.

Khởi tạo Android Fresco

Khi bạn đã liên kết, bạn cần thêm một bước nữa để khởi tạo Thư viện Fresco trong MainApplication.java

import com.facebook.drawee.backends.pipeline.Fresco; // <-- import on top of the file

// ...

@Override
public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);

    Fresco.initialize(this);

}

Nếu hình ảnh của bạn rất lớn, bạn có thể khởi tạo với các cấu hình sau trong MainApplication.java

// Add these imports on top of the file
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.imagepipeline.core.ImagePipelineConfig;
import com.facebook.imagepipeline.decoder.SimpleProgressiveJpegConfig;

// ...

@Override
public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);

  ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)
    .setProgressiveJpegConfig(new SimpleProgressiveJpegConfig())
    .setResizeAndRotateEnabledForNetwork(true)
    .setDownsampleEnabled(true)
    .build();
  Fresco.initialize(this, config);
}

Đó là tất cả.

Sử dụng

Phần lớn từ gói này là thiết lập các phụ thuộc phía Native, sau khi bạn đã thực hiện điều này trước đó, bạn có thể sử dụng nó như dưới đây, rất rất dễ sử dụng:

import PhotoView from "@merryjs/photo-viewer";

// local image
const cat = require("./cat-2575694_1920.jpg");

const photos = [
  {
    source: {
      uri:
        "https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
    },
    title: "Flash End-of-Life",
    summary:
      "Adobe announced its roadmap to stop supporting Flash at the end of 2020. ",
    // must be valid hex color or android will crashes
    titleColor: "#f90000",
    summaryColor: "green"
  },
  {
    source: cat,
    title: "Local image"
  },

  {
    source: {
      uri:
        "https://images.pexels.com/photos/142615/pexels-photo-142615.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
    }
  },
  {
    source: {
      uri:
        "https://images.pexels.com/photos/82072/cat-82072.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
    }
  },
  {
    source: {
      uri:
        "https://images.pexels.com/photos/248261/pexels-photo-248261.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
    }
  },
  {
    source: {
      uri: "https://media.giphy.com/media/3o6vXWzHtGfMR3XoXu/giphy.gif"
    },
    title: "gif 1"
  }
];

<PhotoView
  visible={this.state.visible}
  data={photos}
  hideStatusBar={true}
  initial={this.state.initial}
  onDismiss={e => {
    // don't forgot set state back.
    this.setState({ visible: false });
  }}
/>;

Để xem tài liệu đầy đủ, vui lòng xem https://merryjs.github.io/photo-viewer/interfaces/merryphotoviewporps.html

GIẤY PHÉP

Copyright 2017 Merryjs.com

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Do chúng tôi sử dụng một số phần mềm bên thứ ba và cả hai đều được cấp phép theo Apache 2.0 nên chúng tôi cũng vậy.

• Photo Viewer
• NYTPhotoViewer
• FrescoImageViewer

Thông tin tải về:

Tác giả: merryjs
Nguồn: https://github.com/merryjs/photo-viewer

Giấy phép: Apache-2.0 license