react-native 跨平台滤镜集成

Demo 下载地址:https://github.com/XHTeng/react_native_filter_demo

刚接触RN不久,代码写的很烂,如果您有更好的优化(代码和性能都可),感谢您PR给我

演示效果

集成步骤

1.安装gl-react npm install gl-react --save

可以参考其语法自定义滤镜 https://github.com/ProjectSeptemberInc/gl-react

2.安装gl-react-native npm install gl-react-native --save
3.配置gl-react-native

iOS配置:

打开node_modules-gl-react-native-ios,将RNGL.xcodeproj拖到你的iOS项目Libraries目录中,并在Build Phasses的Link Binary With Libraries链接libRNGL.a库文件

iOS.png

或 Cocapods:pod 'RNGL', :path => './node_modules/gl-react-native'

安卓配置:

  1. android/settings.gradle:: Add the following snippet
    include ':RNGL'
    project(':RNGL').projectDir = file('../node_modules/gl-react-native/android')
  2. android/app/build.gradle: Add in dependencies block.
    compile project(':RNGL')
  3. in your MainApplication (or equivalent) the RNGLPackage needs to be added. Add the import at the top:
    import com.projectseptember.RNGL.RNGLPackage;
  4. In order for React Native to use the package, add it the packages inside of the class extending ReactActivity.
    @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), ... new RNGLPackage() ); }
4.安装gl-react-image

npm install gl-react-image --save

GLImage是一个高性能的组件,用来替换Image组件,来提高渲染滤镜的速度(你依然可以使用Image组件,只是会收到一个警告)

这里需要注意的是,GLImage引入本地资源需要通过resolveAssetSource包装一层,如:

<GLImage source={resolveAssetSource(require('./replace.png'))} imageSize={{ width: 400, height: 400 }} resizeMode="stretch"/>

5.安装封装的滤镜组件gl-react-instagramfilters

npm install gl-react-instagramfilters --save
一共封装了19款常用滤镜

F1977、Amaro、Brannan、Earlybird、Hefe、Hudson、Inkwell、Lokofi、LordKelvin、Nashville、Normal、Rise、Sierra、Sutra、Toaster、Valencia、Walden、XproII

6.运行以下Demo即可看到网络图片被滤镜渲染的效果
import React, { Component ,PropTypes} from 'react';
import {Text,View,TouchableOpacity, Navigator,StyleSheet,Platform,Dimensions, Image,TextInput} from 'react-native';
import {F1977,Amaro,Brannan,Earlybird,Hefe,Hudson,Inkwell,Lokofi,LordKelvin,Nashville,Normal,Rise,Sierra,Sutro,Toaster,Valencia,Walden,XproII} from "gl-react-instagramfilters";
import {Surface ,resolveAssetSource} from "gl-react-native";
const {Image: GLImage} = require("gl-react-image");

<Surface height={1024} width={693}>
  <Hudson>
    <GLImage
      source="http://i.imgur.com/tCatS2c.jpg"
      imageSize={{ width: 1024, height: 693 }}
      resizeMode="cover"
    />
  </Hudson>
</Surface>
7.安装相机组件,实现时时拍照滤镜渲染
  1. 安装 npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save
  2. 链接 react-native link react-native-camera

可以参考文档的Demo进行相机测试 https://github.com/lwansbrough/react-native-camera

这里需要注意的是,this.camera.capture()的Promise中,captureTarget属性只有是Camera.constants.CaptureTarget.memory时才能.then到data、width 、height、duration、size等信息,如果不是只能获取到path路径。

推荐阅读更多精彩内容