尝试在反应原生照片编辑器中编辑图像，但收到错误，找不到变量 RNFS

Question

import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';

移植用于编辑图像的 rn 照片编辑器

import { RNPhotoEditor } from 'react-native-photo-editor'

用于选择图像的选项

const options = {
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
}

获取权限的使用效果

useEffect(() => {
this.getPermissionAsync()
}, [this.getPermissionAsync])

在状态中存储图像

const [ image, setImage ] = useState(null);

获得许可

getPermissionAsync = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}

选取和编辑图像的方法

const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync(options)
console.log(result);
if(result) {
setImage(result.uri);
}
}
const editImage = async() => {
console.log(image.replace('file://', ''))
RNPhotoEditor.Edit({
path:RNFS.DocumentDirectoryPath + image,
hiddenControls: ["save"],
onDone: (res) => {
console.log('on done');
self.setState({isRefresh: !this.state.isRefresh, imageHash: Date.now(), state: self.state});
},
onCancel: (res) => {
console.log('on cancel');
Alert.alert('', 'Edit Cancelled !')
}
});
}

反应原生视图，从这里选择和编辑图像

<TouchableOpacity>
<Text style={{marginVertical: 20}} onPress={() => pickImage()}>Gallery</Text>
<Text style={{marginVertical: 20}}>Camera</Text>
<Text style={{marginVertical: 25}} onPress={() => editImage()}>Edit Image</Text>
</TouchableOpacity>

Answer 1

您的代码：

路径：RNFS。文档目录路径 + 图像，

您应该导入它。 如果你使用 expo ，你的代码应该像：

import {FileSystem} from 'expo'

有关更多详细信息，请参阅世博会的文件 如果你没有 expo，你的代码应该是：

var RNFS = require('react-native-fs');

但是您必须先安装它并按照说明进行配置

Answer 2

• 你可以试试 https://github.com/gre/react-native-view-shot。 提供相当高质量的输出。
• 您还可以将 https://github.com/eneskarpuz/react-native-drag-text-editor 用于照片编辑器应用程序中的所有文本编辑操作。

  ...
  import DragTextEditor from 'react-native-drag-text-editor';
  ...   
  <DragTextEditor
  minWidth={100}
  minHeight={100}
  w={200}
  h={200}
  x={WINDOW.width/4}
  y={WINDOW.height/3}
  FontColor={"#000000"}
  LineHeight={15}
  TextAlign={"left"}
  LetterSpacing={0}
  FontSize={15}
  isDraggable={true}
  isResizable={true}
  /> 
  ...