Dễ dàng Thêm Ảnh GIF Động và Hình Ảnh WebP vào Ứng dụng React Native của Bạn

react-native-flanimatedimage

FLAnimatedImage cho React Native

Mô-đun này được chỉnh sửa từ https://github.com/browniefed/react-native-flanimatedimage với các thay đổi sau đây:

• sử dụng Carthage hoặc CocoaPods cho sự phụ thuộc vào FLAnimatedImage
• tải ảnh bất đồng bộ
• trả về kích thước ảnh onLoadEnd

Cài đặt

Bạn phải cài đặt FLAnimatedImage trước thông qua Carthage hoặc Nếu bạn đang sử dụng CocoaPods, bạn có thể thêm dòng sau vào Podfile của bạn:

pod 'FLAnimatedImage'

sau đó

npm install react-native-flanimatedimage --save

Nếu bạn đang sử dụng react-native@0.40 hoặc thấp hơn

npm install react-native-flanimatedimage@0.0.3 --save

Liên kết

Trong XCode, trong trình duyệt dự án:

• Nhấp chuột phải vào Thư viện
• Thêm Tệp vào [tên dự án của bạn]
• Điều hướng đến node_modules/react-native-flanimatedimage/RNFLAnimatedImage
• Thêm tệp .xcodeproj

Trong XCode, trong trình duyệt dự án, chọn dự án của bạn.

• Thêm libRNFLAnimatedImage.a từ dự án deviceinfo vào Build Phases của dự án của bạn ➜ Liên kết Thư viện Với Thư viện

Nếu thư mục của bạn**Catrhage** /**Pods** không nằm dưới thư mục**ios**, vui lòng sửa đổi Đường dẫn Tìm Kiếm Đầu**Trong Thiết Lập Tìm Kiếm - Đường Dẫn Tìm Kiếm Đầu**

• Nhấp vào tệp .xcodeproj bạn đã thêm trước đó trong trình duyệt dự án và chuyển sang tab Build Settings. Đảm bảo All được bật (thay vì Basic).
• Tìm Header Search Paths và thêm đường dẫn nơi các tệp tiêu đề của FLAnimatedImage được đặt.

Sử dụng

import FLAnimatedImage from 'react-native-flanimatedimage';

...
  onLoadEnd = (e) => {
    if (!e.nativeEvent.size) return;
    const { width, height } = e.nativeEvent.size;
    this.setState({
      width,
      height,
    });
  }
...
  <FLAnimatedImage style={style} source={source} onLoadEnd={this.onLoadEnd} />
...

Chi tiết tải về:

Tác giả: nihgwu
Mã nguồn: https://github.com/nihgwu/react-native-flanimatedimage

Giấy phép: MIT license