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

剛接觸RN不久，代碼寫的很爛，如果您有更好的優(yōu)化（代碼和性能都可），感謝您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項(xiàng)目Libraries目錄中，并在Build Phasses的Link Binary With Libraries鏈接libRNGL.a庫文件

iOS.png

安卓配置：

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.運(yùn)行以下Demo即可看到網(wǎng)絡(luò)圖片被濾鏡渲染的效果

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.安裝相機(jī)組件，實(shí)現(xiàn)時時拍照濾鏡渲染

1. 安裝 npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save
2. 鏈接 react-native link react-native-camera

可以參考文檔的Demo進(jìn)行相機(jī)測試 https://github.com/lwansbrough/react-native-camera

這里需要注意的是，this.camera.capture()的Promise中，captureTarget屬性只有是Camera.constants.CaptureTarget.memory時才能.then到data、width 、height、duration、size等信息，如果不是只能獲取到path路徑。