react-native 支持 Pintura 编辑器吗？

Question

我想在我的 react-native 项目中使用 Pintura 编辑器，但它不起作用，也没有收到任何错误。
我无法理解我哪里出错了，react-native支持Pintura吗？
有什么办法可以解决这个问题吗？

任何线索都将受到高度赞赏。预先感谢您。

Answer 1

React-Native 尚不支持 Pintura 编辑器。但是我们可以将 pintura 与 WebView 一起使用，因为 Pintura 基于 html 技术，它必须在 WebView 中运行才能工作。这是一个例子

Pintura_Editor.js
 
import { WebView } from 'react-native-webview';
import { View } from 'react-native';
import React, { forwardRef, useRef, useEffect,useState } from 'react';

const noop = () => {};
//For Making First letter uppercase.
const upperCaseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
// PATH_TO_PINTURA.HTML file (need to download paid version)
const PinturaEditorProxy = require('./pintura.html');

const Editor = forwardRef((props, ref) => {
const { style, ...options } = props;
const webViewRef = useRef(null);
const [isStatus, setStatus] = useState(false)
    setInterval(()=> {
        setStatus(true)
    }, 3000)

// this passes options to the editor
useEffect(() => {
clearInterval();
    // setup proxy to call functions on editor
        const handler = {
            get: (target, prop) => {
                if (prop === 'history') return new Proxy({ group: 'history' }, handler);
                return (...args) => {
                    const name = [target.group, prop].filter(Boolean).join('.');
                    webViewRef.current.postMessage(
                        JSON.stringify({
                            fn: [name, ...args],
                        })
                    );
                };
            },
        };

        webViewRef.current.editor = new Proxy({}, handler);
        // post new options
        webViewRef.current.postMessage(JSON.stringify({ options: options }));
},[isStatus]);

return (
    <View ref={ref} style={style}>
        <WebView
            ref={webViewRef}
            javaScriptEnabled={true}
            scrollEnabled={false}
            domStorageEnabled={true}
            allowFileAccess={true}
            allowUniversalAccessFromFileURLs={true}
            allowsLinkPreview={false}
            automaticallyAdjustContentInsets={false}
            originWhitelist={['*']}
            textZoom={100}
            source={PinturaEditorProxy}
            onMessage={async (event) => {
                // message from WebView
                const { type, detail } = JSON.parse(event.nativeEvent.data);
               const handler =  await options[`on${upperCaseFirstLetter(type)}`] || noop;

                // call handler
                handler(detail);
            }}
        />
    </View>
);
});

export default Editor;

现在，将此编辑器导入到您的 app.js

 import PinturaEditor from 'PATH_TO_PINTURA_EDITOR'
 const editorRef = null;

 ....
 ....


render() {
return (
<PinturaEditor
      ref={editorRef}
      style={{ margin:40, width: '80%', height: '80%', borderWidth: 2, borderColor: '#eee' }}
      imageCropAspectRatio={1}
  // Image should be base64 or blob type 
      src={base64Image}
      onLoad={(img) => {
          // do something
      }}
      onProcess={async (image) => {
          // do something with edited image
        }}
/>)
}

Answer 2

现在有没有在expo React Native应用程序中实现pintura的解决方案