当前位置：首页 > 软件库 > 手机/移动开发 > >

nativescript-gif

NativeScript plugin to use native gifs

授权协议 View license

开发语言 JavaScript TypeScript

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者盛辰沛

操作系统 iOS

开源组织无

适用人群未知

软件概览

NativeScript-Gif

NativeScript plugin to use GIFs in your application.

Installation

NativeScript Version 7+:tns plugin add nativescript-gifNativeScript Version prior to 7:tns plugin add nativescript-gif@4.0.6

The native libraries used to handle rendering GIFs for Android & iOS.

Android Library	iOS CocoaPod
Koral-- / android-gif-drawable	FLAnimatedImage by Flipboard

Android Screen	iOS Screen

Usage

Plain NativeScript

IMPORTANT: Make sure you includexmlns:Gif="nativescript-gif" on the Page element.

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Gif="nativescript-gif" loaded="pageLoaded">
  <StackLayout>
    <Gif:Gif headers="{{headersJSON}}" src="~/gifs/bill.gif" height="100" />
    <Gif:Gif src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.gif" height="200" />
  </StackLayout>
</Page>

NativeScript Angular

import { registerElement } from 'nativescript-angular/element-registry';
import { Gif } from 'nativescript-gif';
registerElement('Gif', () => Gif);

HTML

<StackLayout>
    <Gif [headers]="headersJSON" src="~/gifs/bill.gif" height="100" ></Gif>
    <Gif src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.gif" height="200" ></Gif>
</StackLayout>

Bundling Note:

Be sure that you have your .gifs added to the globs of the CopyWebpackPlugin as part of your webpack.config.

Prior to Webpack 5

Demo app sample: https://github.com/bradmartin/nativescript-gif/blob/master/demo/webpack.config.js#L282

{
  from: {
    glob: '**/*.gif';
  }
}

Webpack 5+

const webpack = require('@nativescript/webpack')

module.exports = env => {
  webpack.init(env)

  webpack.Utils.addCopyRule('**/*.gif')

  return webpack.resolveConfig()
}

Properties

src - requiredSet the gif file to play.
headers - (JSON Object) - optionalSet headers to add when loading a gif from URL

API

start()

starts playing the .gif

stop()

stops playing the .gif

getFrameCount()

returns the number of frames in the current .gif

isPlaying()

returns boolean value indicating if the gif is playing.

Android Only

getDuration()

returns the .gif duration

reset()

resets the .gif to its initial frame

setSpeed(speedFactor: Number)

sets the .gif play speed

recycle()

provided to speed up freeing memory advanced usage - you shouldn't need this often

使用案例

react-native 项目开发问题

1.安装依赖注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！可以用官网描述的yarn 2.Android真机调试大力晃动手机弹出菜单 3.Unable to load script from assets index.android.bundle... 链接 www.jianshu.com/p/a6f97bdc0… 4.Module HMRClient
ReactNative前端开发者

ReactNative前端开发者文档版本0.0.2 Author: Necfol 说明: 本文档用于指导前端React Native的开发，如需开发其他其他框架应用，不适用本文档前期准备 ReactNative 的基本概念ReactNative文档 es6 开发基本知识 es6 基本文档 Node 环境(Node >=5.0.0，Yarn)下载地址 Android Studio环境Androi
React Native for Web配置

React Native for Web配置兼容性：React Native 0.55。 “React Native for Web”使得可以使用React DOM在Web上运行React Native组件和API。查看在Web上运行的React Native示例的实时演示。高质量的Web界面：可以轻松地在JavaScript中创建fast，自适应的Web UI。它提供原生质量的交互，支持多种