Я пытаюсь добавить фильтр типа Instagram, чтобы добавить некоторый эффект к моему изображению с помощью React-native?

Question

Я создаю приложение для редактирования изображений, и мне нужно установить фильтры эффектов изображения для изменения яркости, оттенка, насыщенности и т. Д. С помощью Range Slider? Есть ли какие-либо возможности сделать это со свойствами Css?

Мне нужно что-то вроде Instagram Filters.

import React from 'react';
import { StyleSheet, 
         Text, 
         View, 
         Image, 
         SafeAreaView,
         ScrollView } from 'react-native';
import {Asset } from 'expo-asset';


export default class App extends React.Component {

  state={
    ready: false,
    image: null,
    value: 0,
    angle: 0,
    deg: 'deg',
    Vflipangle: 0,
    Hflipangle:0,
    positivevalue: 0,
  };


   //--- this function brings the contains the image locaiton to show inside <Image/>----------
  //---------------This function runs automatically on mounting----------------------------
  componentDidMount(){
    const image = Asset.fromModule(require('./assets/girl.jpg'));
    this.setState({
      ready: true,
      image,
    });
  }

//------------------------------------------------------------------------------
//Function to Render Image to show on Application Screen---------------------------
_renderImage =()=> {
  return(
    // <View style = {{margin: 20, alignItems: 'center',backgroundColor: 'black', overflow: 'hidden'}}>

    // </View>
    <Image source= {{uri: this.state.image.localUri || this.state.image.uri}}
    style={{width:300+this.state.positivevalue,height:400+this.state.positivevalue, resizeMode:'cover',
           transform: [{ rotate: this.state.value+this.state.deg}]
           }}
    />
  )
}

filteredImage =()=> {
  return(
    <Image source={{uri: this.state.image.localUri || this.state.image.uri}}
    style={{flex: 1,
      width: null, 
      height: null, 
      resizeMode: 'cover',}}/>
  )
}


 render(){
  return (
    <SafeAreaView style={styles.container}>
      <View style={{alignItems: 'center',
                    justifyContent: 'center',
                    flex: 2}}>
      <View style={{transform: [{ rotate: this.state.angle+this.state.deg},
                                 {rotateY: this.state.Vflipangle + this.state.deg},
                                 {rotateX: this.state.Hflipangle + this.state.deg}],
                    overflow: 'hidden', 
                    width: 300, 
                    height: 400,
                    alignItems: 'flex-end',
                    justifyContent: 'center', 
                    //
                    }}>
        {this.state.ready && this._renderImage()}
      </View>
      </View>
      <ScrollView scrollEventThrottle= {16} style={{flex: 1}}>
         <View style={{height: 150, marginTop: 20}}>
           <ScrollView horizontal={true}>
           <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex:0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Reset</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Brightness</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Contrast</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Exposure</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Saturation</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5, alignItems: 'center',height:10}}>
                <Text style={{color: '#ffffff'}}>Temperature</Text>
               </View>               
             </View>
           </ScrollView>
         </View>
      </ScrollView>
      </SafeAreaView>
  );
 }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',

   // alignItems: 'center',
  //justifyContent: 'center',
  },
})

;

Здесь мой код выглядит так, позже я добавлю слайдер

Answer 1

Вы можете добиться этих эффектов, используя эту библиотеку: gl-Reaction-native-v2

Это немного сложнее, чем CSS-эффекты, но вы просто не можете использовать CSS в ReactРодные. Так что это, скорее всего, лучший вариант.